使用场景：一个页面由多个form表单组成，提交的时候要统一校验必填信息，统一提交
一、使用Promise.all统一处理表单验证
// 校验表单一
let dispatchValidate = new Promise((resolve, reject) => {
this.$refs.leftform.validate((valid) => {
if (valid) {
// 表单一校验通过后其他逻辑判断
this.checkEqu();
resolve();
} else {
return false;
}
});
});
// 校验表单二
let formValidate = new Promise((resolve, reject) => {
this.$refs.rightform.validate((valid) => {
if (valid) {
resolve();
} else {
reject(new Error('错误'));
return false;
}
});
});
// Promise.all统一处理
Promise.all([dispatchValidate, formValidate])
.then(() => {
// 调用接口
this.confirmPay();
this.$message.success('验证通过')
}).catch(err => {
this.$message.error('验证失败');
})
new Promise分别对两个表单校验，最后用Promise.all统一处理，再做后续操作
二、优化上面的代码，封装一个表单验证
utils/index.js
/**
* 表单验证函数
* @param {*} formName 表单名称
* @returns {Promise}
*/
export const validateForm = (formName) => {//注意js文件中拿不到refs，所以需要外部直接传一个ref对象进来
return new Promise((resolve, reject) => {
formName.validate((valid) => {//this.$refs[formName].validate返回的是一个promise
if (valid) {
resolve();
} else {
reject(new Error('错误'));
return false;
}
})
})
}
form.vue
<script>
import { messageTips, validateForm } from "@/utils/index"
export default{
submitForm()
//表单验证
Promise.all([validateForm(this.$refs.leftform), validateForm(this.$refs.rightform)])
.then(() => {
console.log("表单验证成功");
//验证成功后在此处发请求
this.addProWorkItem(params).then(res => {
if (res.code == 20000 || res.code == 200) {
messageTips("success", "接口请求成功");
this.closeDialog();
} else {
console.log(">>>ERR", res.msg);
messageTips("error", "接口请求失败");
}
}).catch(err => {
console.log(">>>ERR", err);
messageTips("error", "接口请求失败");
})
})
.catch((err) => {
console.log("表单验证失败");
})
}
}
</script>
