iview自定义表单校验的规则如下
data () {
const validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('Please enter your password'));
} else {
if (this.formCustom.passwdCheck !== '') {
// 对第二个密码框单独验证
this.$refs.formCustom.validateField('passwdCheck');
}
callback();
}
};
return {
// 再写对应的数据
}
}
其实上面的内容不是重点,iview官网上就可以搜到教程。重点在于在校验的定义中,只能包含校验的内容,而不要只去做form中对应值的判断。例如
const validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('Please enter your password'));
} else if (value.length == 10) {
// 随便举例一个参数
this.pwdLength = 10
} else {
callback();
}
}
这里的pwdLength只是随便举一个例子,在这一个if的分支语句中,只是一个简单的赋值,并未牵涉到校验的内容。看似无伤大雅,然而却在后续的整个表单的校验使得valid的值为undefined,表单校验始终无法通过。
this.$refs[name].validate(valid => {
// undefined
console.log(valid)
})
解决办法有二:
- 在校验中删除没有callback的if分支,在其它位置进行必要的数据处理
- 在if语句中添加callback()
网友评论