vue element 多个Form 表单同时验证

多个Form内容统一提交验证

 1 <el-form   ref="form1"></el-form>
 2 <el-form   ref="form2"></el-form>
 3 <el-form   ref="form3"></el-form>
 4 <el-form   ref="form4"></el-form>
 5 export default{
 6     data(){
 7         resultArr:[],//接受验证返回结果数组
 8         formArr:['form1','form2','form3','form4'],//存放表单ref数组
 9     }，
10     methods:{
11         //封装验证函数
12         checkForm(formName){
13             let _self=this;
14             _self.resultArr = []
15             let result = new Promise(function(resolve, reject) {
16             _self.$refs[formName].validate((valid) => {
17                 if (valid) {
18                     resolve();
19                 } else { reject() }
20                 })
21             })
22             _self.resultArr.push(result) //push 得到promise的结果
23         },
24         submit(){
25             let _self=this;
26             _self.formArr.forEach(item => { //根据表单的ref校验
27                 _self.checkForm(item)
28             })
29            //resultArr数组的值必须是promise对象才能使用Promise.all，在checkForm做了这一步
30             Promise.all(_self.resultArr).then(function() { //都通过了
31               alert('所有表单验证通过')
32               // 该区域使用this无效，promise内面的this表示局部，并不代表VueComponet实例
33             }).catch(function() {
34                 console.log("err");
35             });
36         }
37     }
38 }

赞