1.HTML頁面

//el-form 標簽添加上
ref="form2Form" :rules="rules2" :model="form2"

`正常表單校驗`?

//沒有循環表單的使用事例<el-form-item label="投保人名稱"  class="insurance-date-no1" prop="tbrName"><el-input v-model="form2.tbrName" type="text" ></el-input></el-form-item>

、循環校驗、

//循環校驗 校驗規則就嵌入在html里面
<div style="width: 100%"  class="add-item" v-for="(item,index) in form2.details" :key="index"><el-form-item label="名稱" :prop="`details.${index}.bbrName`":rules="[{ required: true, message: '被保險人名稱不能為空！', trigger: 'blur' }]" class="insurance-date-no1"><el-input v-model="item.bbrName" type="text" maxlength="30"></el-input></el-form-item>
</div>

?2、js數據內容

`校驗規則`

const rules2 = {tbrName: [{ required: true, message: '投保人名稱不能為空！', trigger: 'blur' },],tbrType: [{required: true, message: '投保人類型不能為空！', trigger: 'change',},],tbrCerttype: [{required: true, message: '投保人證件類型不能為空！', trigger: 'change',},],tbrCertno: [{ required: true, message: '投保人證件號不能為空！', trigger: 'blur' },],tbrPhone: [{ required: true, message: '投保人手機號不能為空！', trigger: 'blur' },{ min: 11, max: 11, message: '投保人手機號長度不對', trigger: 'blur' },{ pattern: /^1[3-9]\d{9}$/, message: '投保人手機號格式不正確', trigger: 'blur' }],tbrEmail: [{ required: true, message: '投保人郵箱不能為空！', trigger: 'blur' },{ pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/, message: '投保人郵箱格式不正確', trigger: 'blur' }],yymj: [{ required: true, message: '投保人名稱不能為空！', trigger: 'blur' },],yyzz: [{required: true, message: '企業營業性質不能為空！', trigger: 'change',},],orgType: [{required: true, message: '企業類型不能為空！', trigger: 'change',},],spqyType: [{required: true, message: '食品企業類型不能為空！', trigger: 'change',},],
}

?`數據結構`

const form2 = ref({"applyNo": "", //?申請編號step1成功會返回"tbrName":"", //?投保人姓名"tbrType":"", //?投保人類型"tbrCerttype":"",//投保人證件類型"tbrCertno":"",//投保人證件編號"tbrPhone":"",//手機"tbrEmail":"",//郵箱"details":[{"bbrName": "", //被保險人名稱"bbrType": "", //被保險人類型"bbrCerttype": "",//被保險人證件類型"bbrCertno": "",//被保險人證件編號"bbrDirthday":"",//被保險人出生日期"isMain": 1,//是否主被保險人"bbrOrgType": ""//被保險人企業性質}],"yymj":"",//營業面積(平方)"yyzz":"H621",//企業營業性質"orgType":"21",//企業類型"spqyType":"3"//食品企業類型
});

?3.提交按鈕觸發校驗功能

/*** 完成提交*/
function submitFun(){form2Form.value.validate((valid) => {if (valid) {}});}