给循环数组里的每个对象做表单校验

r囧r小猫 2023-03-01 09:30 47阅读 0赞

需求是需要对下面循环产生的数组中的每行身份证和电话号码做校验规则  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70]

和单表单对象校验不同的是prop而已。单对象表单prop是写死的。当数组中的对象校验时，数组外层用el-form包裹，里面循环产生的对象prop要用动态拼接的方式，如：:prop="‘peersList.’ + index +’.idcard’"。

<el-form :model="ruleForm" ref="peerForm" class="peersList" >
 <el-row v-for="(row,index) in ruleForm.peersList" :key="index">
 <el-col :span="1" align="center" style="margin-left: 10px;">
 {
 {index+1}}
 </el-col>
 <el-col :span="4" style="margin-left: 10px;">
 <el-form-item :prop="'peersList.' + index +'.name'">
 <el-input v-model="row.name" placeholder="姓名"></el-input>
 </el-form-item>
 </el-col>
 <el-col :span="4" style="margin-left: 10px;text-align: center;">
 <el-form-item :prop="'peersList.' + index +'.sex'">
 <el-switch
 v-model="row.sex"
 active-text="女"
 inactive-text="男"
 ></el-switch>
 </el-form-item>
 </el-col>
 <el-col :span="6" style="margin-left: 10px;">
 <el-form-item :prop="'peersList.' + index +'.idcard'" :rules="morePeerRules.checkIdCode">
 <el-input
 data-id-card="idCard"
 type="number"
 v-model="row.idcard"
 placeholder="身份证号"
 maxlength="18"
 show-word-limit
 ></el-input>
 </el-form-item>
 </el-col>
 <el-col :span="5" style="margin-left: 10px;">
 <el-form-item :prop="'peersList.' + index +'.phone'" :rules="morePeerRules.checkPhone">
 <el-input
 data-phone="phone"
 type="number"
 v-model="row.phone"
 placeholder="手机"
 maxlength="11"
 show-word-limit
 ></el-input>
 </el-form-item>
 </el-col>
 <el-col :span="2" align="center">
 <a class="el-link el-link--default">
 
 </a>
 <a class="el-link el-link--default" style="margin-left: 8px;">
 
 </a>
 </el-col>
 </el-row>
 </el-form>
 
 
 import { rule } from "@/util/rule";
 data() {
 return {
 ruleForm: {
 peersList: [
 {
 name: "",
 sex: false,
 idcard: "",
 phone: ""
 }
 ]
 }
 },
 morePeerRules: {
 checkIdCode: [
 { validator: rule.idCard, required: true, trigger: "blur" }
 ],
 checkPhone: [
 { validator: rule.phoneNumber, required: true, trigger: "blur" }
 ]
 },
 },
 
 
 
 methods:{
 //添加同行人
 addRowPeers() {
 this.ruleForm.peersList.push({
 name: "",
 sex: false,
 idcard: "",
 phone: ""
 });
 },
 //删除同行人
 delectRowPeers(row, index) {
 if (this.ruleForm.peersList.length == 1) {
 this.$message.warning("不允许删除最后一条");
 } else {
 this.$confirm("是否确认删除？", {
 confirmButtonText: "确定",
 cancelButtonText: "取消",
 type: "warning"
 })
 .then(() => {
 this.ruleForm.peersList.splice(index, 1);
 })
 .then(data => {
 this.$message.success("删除成功");
 });
 }
 },
 }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70]: /images/20230209/4c4a20ff50744bb597e4ed2d0571f107.png