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

你可能感兴趣的:(elementUI,filter,vue.js,es6,前端)