首先,这里是一个 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
继续阅读与本文标签相同的文章
-
请求支援!我被“非结构化数据包围了” | 开发者必读(060期)
2026-05-18栏目: 教程
-
研发效能提升 36 计第一课:互联网时代研发效能的挑战和应对之道
2026-05-18栏目: 教程
-
Service Mesh 发展趋势:云原生中流砥柱
2026-05-18栏目: 教程
-
深入理解 Java 中 SPI 机制
2026-05-18栏目: 教程
-
阿里云“网红"运维工程师白金:做一个平凡的圆梦人
2026-05-18栏目: 教程
