vue中多个表单同时校验
开发过程中,有时候会遇到需要对多个表单进行校验,需要利用Promise的特性进行解决
使用Promise进行一个队列校验
// 表单校验
submitForm (refName: string) {
return new Promise<void>((resolve, reject) => {
(this.$refs as any)[refName].validate((valid: any) => {
if (valid) {
resolve();
} else {
// 注意此处需要传入一个new Error(''),否则会报错Expected the Promise rejection reason to be an Error
reject(new Error('错误'));
}
});
});
}
分别对每个表单进行绑定ref,这里例子是有两个表单
submit () {
// 多个表单同时校验
Promise.all([this.submitForm('purchaseRef'), this.submitForm('purchaseBotRef')]).then(() => {
console.log('确认收货');
}).catch(() => {
this.$tipMessage('error', '请填写完整');
});
}
这样就可以实现多个表单同时校验