接手过一个vue + element 项目,要求对 from 表单进行部分校验;两个按钮点击分别校验表单里面的不同项。
主要用到了 elementUI 的 form 表单提供的部分校验方法 validateField ,配合 Promise.all 方法统一处理校验信息。
//入参是区分点击的是那个按钮 1、2
submitForm(type) {
//配置和区分需要校验项
let fieldList = [];
if(type === 1){
fieldList = ['name','age','phone','passWord'];
}else{
fieldList = ['name','email','code'];
};
const fieldPromise = fieldList.map(item => {
return new Promise((resolve,reject) => {
this.$refs['form'].validateField(item, error =>{
resolve(error);
})
})
});
//利用 Promise.all 方法统一处理上面 map 出来的方法
Promise.all(fieldPromise).then(item => {
//过滤数组中的空字符串,list.length为0表示通过验证
const list = item.filter(data => data);
if(!list){
console.log('校验通过');
}
});
}