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

}