vue + elementUI 的表单实现部分必填项校验

接手过一个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('校验通过');
		}
   });
}