场景:根据需求业务需要在每个房屋下添加不定数量的家庭成员,且每个家庭成员的信息都是必填字段,且身份证和手机号需要正则验证
如图
结构:
<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来控制通过校验与否,且要注意在这个函数最上面要把这个变量赋值回初始值,否则当前检验规则不通过下次再保存永远不通过!