vue3+element-plus 表单校验和循环form表单校验

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) {}});}