vue element实现多个Formt表单同时验证

走着看着忘着

vue element多个Formt表单同时验证


多个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. }

复制代码

vue多个表单校验 (巧用new promise)


场景

同一个页面有多个模块，每个模板又单独使用了一个

1. 表单

复制代码

组件，那么我们在点击

1. 提交按钮

复制代码

时如何同时校验多个表单，我们可以使用Promise

方案

• 1、子组件
  

子组件：return 出当前的表单的数据

1. onSubmit() {
   
2.     let _self=this
   
3.     return new Promise((resolve, reject) =>{
   
4.         _self.$refs.form.validate(valid => {
   
5.             if (valid) { // 检验成功 传当前表单的数据
   
6.                 resolve({0:_self.form})
   
7.             } else {
   
8.                 this.$message.error('员工自选-清单需求，请按要求填写')
   
9.                 reject()
   
10.             }
    
11.         })
    
12.     })
    
13. },

复制代码

• 2、父组件
  

1. <!-- 方案需求 -->
   
2. <div v-show="active === 2">
   
3.     <FormEmployeeList ref="Form0"></FormEmployeeList>
   
4.     <FormEmployeeGift ref="Form1"></FormEmployeeGift>
   
5.     <FormEmployeeCustomization ref="Form2"></FormEmployeeCustomization>
   
6.     <FormEnterprisesList ref="Form3"></FormEnterprisesList>
   
7.     <FormEnterprisesGift ref="Form4"></FormEnterprisesGift>
   
8.     <FormEnterprisesCustomization ref="Form5"></FormEnterprisesCustomization>
   
9. </div>

复制代码

父组件：onSubmit时，调用子组件的onSubmit方法，接受promise的返回结果，再通过Promise.all()方法一一验证

1. onSubmit() {
   
2.     let  newArr = [] //承接promise的返回结果
   
3.     for (let v = 0; v < 6; v ++) {
   
4.         let res =this.$refs['Form' + v].onSubmit()
   
5.         newArr.push(res)
   
6.     }
   
7.     Promise.all(newArr).then(res => { //都通过了
   
8.             console.log('res',res)
   
9.         //res是数组，需转对象
   
10.         let obj = Object.assign({},...res)
    
11.         this.form = obj
    
12.         console.log('大功告成',this.form)
    
13.     }).catch(err=> {
    
14.         console.log('err',err)
    
15.     })
    
16. },

复制代码

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

来源:https://www.jb51.net/javascript/322403ocv.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！