- 一、具体情况：
formA、formB、formC。其中，formA的rules验证规则中，含有异步操作，会先调用后台接口，验证身份证是否存在。如下：
data () {
let isIdcardExist = (rule, value,callback)=>{
if(!this.formEdit){
checkIdCard(this.baseForm.idCard).then((res) => {
if(res.data.data){
callback(new Error(rule.message))
}else{
callback()
}
});
}else{
callback()
}
}
return {
rules:{
idCard: [
{ required: true, message: "请输入身份证", trigger: "blur" },
{ validator: isIdcardExist, message: "身份证号已经存在", trigger: "blur"}
],
},
};
},
- 二、问题：
如果同步验证formA、formB、formC，会发现formB和formC验证提示了，而formA虽然给提示了，但是没有拦截住，继续走下面的保存接口了。因为异步操作还没返回，就执行了下面同步的操作。
- 三、解决办法
用promise.all对formA、formB、formC进行验证。
- 四：具体方案如下：
（1）三个组件formA、formB、formC中，都需要在method中加入方法validate
methods: {
validate(callback){
this.$refs.baseForm.validate((valid) => {
callback(valid)
})
},
（2）父组件中，定义对应三个promise
formA = new Promise((resolve, reject) => {
this.$refs["formA "].validate((valid) => {
if (valid) {
resolve()
} else {
reject(false)
}
});
})
formB、formC同理。
（3）promise.all操作
Promise.all([formA,formB,formC]).then((res) => {
}).catch(error => {
})
},
