iView 自定义表单验证validator 异步校验
程序员文章站
2024-03-12 20:10:14
...
首先,这里是一个 ajax(axios) 请求的自定义表单验证:
// 自定义表单验证
const customValidator = (rule, value, callback) => {
axios.get('url', { params }).then(res => {
if (res) {
callback();
} else {
callback(new Error('错误'));
}
})
};
这个是Form表单的部分代码:
<Form ref="myForm" :model="formModel" :rules="formRules"></Form>
这个是问题代码
// 返回各种验证操作的结果
myValidate() {
let isValid = true;
isValid = this.otherValidate(); // 可能不止一个验证函数
if (isValid) {
// 这个表单验证肯定是异步的,毕竟我们自定义的表单验证是一个ajax请求
// 所以这么写是没有办法等到 valid 赋值给 isValid 的
// 这就导致了这里的验证形同虚设
this.$refs.myForm.validate(valid => {
isValid = valid;
});
}
return isValid;
}
问题修复:
myValidate() {
let isValid = true;
isValid = this.otherValidate(); // 可能不止一个验证函数
if (isValid) {
// 经过console.log 发现validate是一个Promise,这就好办了,直接返回它,并且里面的值也一并返回
return this.$refs.myForm.validate(valid => {
return valid;
});
} else {
return false;
}
}
executeFunc() {
let rslt = this.myValidate();
if (rslt !== false) { // rslt 不是false 那就是Promise
rslt.then(res => {
if (res) {
// doSomething 就这样就OK了
}
});
}
}
END
上一篇: python计算平面形体有周长和面积
下一篇: 洛谷题:陶陶摘苹果(升级版)题解