1. 문제점 설명
프로젝트 개발 과정에서 폼 검증을 접하게 되는데, 이번에는 검증 규칙이 비교적 엄격해서 element-ui 폼에 포함된 검증으로는 전혀 문제를 해결할 수 없었습니다.
2. 해결책:
elementui 양식 검증에서 사용자 정의 검증을 사용하십시오.validUsername은 사용자 정의 검증 방법의 이름입니다.
2.1 양식 유효성 검사 정의:
rules: {
userTypeId: [
{ required: true, message: '请选择类型', trigger: 'change' },
username:
{ required: true, validator: validUsername, trigger: 'blur' }
]
}
2.2 사용자 정의 확인 방법:
참고: 메서드의 첫 번째 정의는 callback()을 반환해야 합니다. 그렇지 않으면 양식 확인이 성공하지 못합니다.
export default {
name: 'Registry',
data() {
// js部分
const validUsername = (rule, value, callback) => {
const reg = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,18}$/
if (value === '') {
callback(new Error('请输入用户名'))
} else if (!reg.test(value)) {
callback(new Error('用户名必须是由6-18位英文(含大小写)+数字组成'))
} else {
callback()
}
}
}
}
3. 양식 확인
this.$refs.ruleForm.validate((valid) => {
if(valid){
console.log('表单校验成功')
}
})
4. 폼 검증 결과를 삭제하고,
취소 버튼을 사용할 수도 있습니다.
this.$refs.pwdChangeForm.clearValidate()
간단한 경우: 비밀번호 변경
양식 유효성 검사를 정의합니다.
rules: {
newPassword: [
{ required: true, message: '新密码不能为空', trigger: 'blur' },
{ min: 8, max: 16, message: '长度在 8 到 16 个字符', trigger: 'blur' },
{ required: true, validator: toPassword, trigger: "blur" }
],
confirmPassword: [
{ required: true, message: "确认密码不能为空", trigger: "blur" },
{ required: true, validator: equalToPassword, trigger: "blur" }
]
},
사용자 정의 확인 방법:
참고: 메서드의 첫 번째 정의는 callback()을 반환해야 합니다. 그렇지 않으면 양식 확인이 성공하지 못합니다.
export default {
name: 'Registry',
data() {
// js部分
// 密码自定义校验
const toPassword = (rule, value, callback) => {
var passwordreg = /(?![A-Z]*$)(?![a-z]*$)(?![0-9]*$)(?![^a-zA-Z0-9]*$)/
if (!passwordreg.test(value)) {
callback(
new Error(
'密码必须由大写字母、小写字母、数字、特殊符号中的2种及以上类型组成!'
)
)
} else {
callback()
}
}
// 确认密码自定义校验
const equalToPassword= (rule, value, callback) => {
if (this.infoForm.newPassword !== value) {
callback(new Error("两次输入的密码不一致"));
} else {
callback();
}
}
}
}
참조 기사: 요소-ui 양식 사용자 정의 검증_요소 양식 사용자 정의 검증_Zheng Shixiu의 블로그-CSDN 블로그