vue3+setup+validator验证两次输入密码是否一致(土法)
vue3+validator验证两次输入密码是否一致
·
数据源:
const regForm = ref({
name: '',
email: '',
password: '',
passwordCheck: ''
})
定义两个validator验证规则:
这里的第一个,也就是validatepass2的if在vue2中可以是:
if (this.regForm.passwordcheck !== '') {
this.$refs.regForm.validateField('passwordcheck');
}
但是在vue3改this.$refs很麻烦,所以直接按以下这样写了:
const validatePass2 = () => {
return (rule, value, callback) => {
if (value !== regForm.value.password && regForm.value.password !== '') {
callback(new Error('两次输入密码不一致!'))
} else {
callback()
}
}
}
const validatePass1 = () => {
return (rule, value, callback) => {
if (
value !== regForm.value.passwordCheck &&
regForm.value.passwordCheck !== ''
) {
callback(new Error('两次输入密码不一致!'))
} else {
callback()
}
}
}
用的时候:
password: [
{
min: 6,
max: 16,
message: '密码长度在 6 到 16 个字符',
trigger: 'blur'
},
{ validator: validatePass1(),
trigger: 'blur'
}
],
passwordCheck: [
{
trigger: 'blur',
message: '请确认密码'
},
{ min: 6,
max: 16,
message: '密码长度在 6 到 16 个字符',
trigger: 'blur' },
{
trigger: 'blur',
validator: validatePass2()
}
]
有个坑,把validatePass1和2抽离出来到rules.js,再导入会报错regForm undifined或者regForm的.vale读取不到,放到一个文件才生效,原因暂时不知道。
更多推荐
已为社区贡献1条内容
所有评论(0)