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

}
相关推荐
gqkmiss17 分钟前
Chrome 浏览器插件获取网页 iframe 中的 window 对象
前端·chrome·iframe·postmessage·chrome 插件
m0_748247552 小时前
Web 应用项目开发全流程解析与实战经验分享
开发语言·前端·php
m0_748255023 小时前
前端常用算法集合
前端·算法
真的很上进3 小时前
如何借助 Babel+TS+ESLint 构建现代 JS 工程环境?
java·前端·javascript·css·react.js·vue·html
web130933203983 小时前
vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法
前端·vue.js·elementui
NiNg_1_2344 小时前
Echarts连接数据库,实时绘制图表详解
前端·数据库·echarts
如若1234 小时前
对文件内的文件名生成目录,方便查阅
java·前端·python
滚雪球~5 小时前
npm error code ETIMEDOUT
前端·npm·node.js
沙漏无语5 小时前
npm : 无法加载文件 D:\Nodejs\node_global\npm.ps1,因为在此系统上禁止运行脚本
前端·npm·node.js
supermapsupport5 小时前
iClient3D for Cesium在Vue中快速实现场景卷帘
前端·vue.js·3d·cesium·supermap