element-ui多个表单如何同时验证

╰+攻爆jí腚メ 2022-12-31 15:20 266阅读 0赞

<template>
      <div>
            <div v-for="(item,index) in Data" :key="index">
                <el-form :model="item" :ref="'ValidateForm'" class="demo-ruleForm" :rules="rules">
                    <el-form-item label="密码" prop="pass">
                        <el-input type="password" v-model="item.pass" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="checkPass">
                        <el-input type="password" v-model="item.checkPass" auto-complete="off"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <el-button type="primary" @click="submitForms('ValidateForm')">提交</el-button>
    
      </div>
    </template>
    
    <script>
    import url from "../../common/api";
    export default {
     data() {
        return {
            Data: [
                {
                    pass: '',
                    checkPass: '',
                },
                {
                    pass: '',
                    checkPass: '',
                },
                {
                    pass: '',
                    checkPass: '',
                }
            ],
            rules: {
                checkPass: [
                  { required: true, message: '验证信息自己写', trigger: 'blur' },
                ],
            },
        };
     },
     methods: {
        submitForms(ruleForm) {
          let xix=[]//创建一个空数据，用来存每个valid是true/false,
          this.Data.forEach((item,index) => {
            this.$refs[ruleForm][index].validate((valid) => {
                xix.push(valid)
            });
          });
          //查看是否都是true
          let xin=xix.every((item,index)=>{
              return item
          })
          //xix.every（valid）每一项都是true才提交请求
          if (xin) {
              axios.get(...)
          } else {
              console.log('error submit!!');
          }
        }
     }
    }
    </script>
    
    <style>
    
    </style>