vue中用element-ui给动态添加的表单增加校验规则_elform动态添加校验

场景：根据需求业务需要在每个房屋下添加不定数量的家庭成员，且每个家庭成员的信息都是必填字段，且身份证和手机号需要正则验证

如图

 结构：

<div v-show="parkInformationChecked1" class="personList" v-for="(item, i) in personnelInformation" :key="i">
    <div class="personListTitle">家庭成员{{ i + 1 }}<el-button @click="deleteperson(i)" type="primary" size="mini"
            style="margin-left: 30px;" v-if="type != 'look'">删除</el-button></div>
    <el-form style="padding-top: 30px;background-color: #F7F6F9;" :rules="personnelRules" ref="personnelInformationForm"
        class="content" label-width="120px" :model="item">
        <el-form-item label="姓名" prop="name">
            <el-input class="searchInput1" v-model="item.name" placeholder="请输入"></el-input>
 
        </el-form-item>
        <el-form-item label="手机号" prop="telephone">
            <el-input class="searchInput1" v-model="item.telephone" placeholder="请输入"></el-input>
 
        </el-form-item>
        <el-form-item label="身份证号" prop="idNumber">
            <el-input class="searchInput1" v-model="item.idNumber" placeholder="请输入"></el-input>
 
        </el-form-item>
        <el-form-item label="与户主关系" prop="isHouserelation">
            <el-select class="searchInput1" v-model="item.isHouserelation" placeholder="请选择" clearable>
                <el-option v-for="item in relationLst" :key="item.index" :label="item.label"
                    :value="item.label"></el-option>
            </el-select>
        </el-form-item>
    </el-form>
</div>
<div v-show="parkInformationChecked" class="personbutton">
    <el-button @click="pushPersonnelInformation" style="width: 200px;height: 40px;">添加人员</el-button>
</div>

校验规则：

 personnelRules: {
     name: [{validator: validatePass, required: true, message: '内容不能为空' }],
     telephone: [{ required : true, validator: relationPass, trigger: 'blur'  }],
     idNumber: [{ required : true, validator: idnumPass, trigger: 'blur'  }],
     isHouserelation: [{validator: validatePass, required: true, message: '内容不能为空' }]
     }
 
 
let relationPass = (rule, value, callback) => {
            if (!(/^\d{11}$/.test(value))) {
                callback(new Error('请输入正确手机号'));
            } else if (value === '') {
                callback(new Error('请输入手机号'));
            } else {
                callback();
            }
        };
        let id = /^[1-9][0-9]{5}(19|20)[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}([0-9]|x|X)$/;
        let idnumPass = (rule, value, callback) => {
            if (!(id.test(value))) {
                callback(new Error('请输入正确身份证号'));
            } else if (value === '') {
                callback(new Error('请输入身份证号'));
            } else {
                callback();
            }
        };
        var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('内容不能为空'));
        } else {
          
          callback();
        }
      };
 

添加人员按钮：

pushPersonnelInformation() {
            this.personnelInformation.push({
                name: '',
                telephone: '',
                idNumber: '',
                isHouserelation: ''
            })
        },

删除人员：

deleteperson(i){
            this.personnelInformation.splice(1, 1)
        },

保存按钮遍历校验表单规则：

save(){
        this.flag = true
            for (let i = 0; i < this.personnelInformation.length; i++) {
                    this.$refs.personnelInformationForm[i].validate((valid) => {
                        if (!valid) {
                            this.flag = false
 
                            return false;
                        }
                    });
                }
            if (!this.flag) return
            let postData = {
                houseId: this.id,
                personDetails: this.personnelInformation
            }
            
             var res = await personnelHousAdd(postData)
            if (res.status === 200) {
            this.$message({
                message: '信息添加成功!',
                type:'success'
            })
            }
 
}

注意：v-for遍历生成的表单的ref拿到的是一个数组，this.$refs.personnelInformationForm[i]拿到的就是具体的各个表单的ref的对应结构了，准备个变量flag来控制通过校验与否，且要注意在这个函数最上面要把这个变量赋值回初始值，否则当前检验规则不通过下次再保存永远不通过！