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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/21623.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

什么是增值税通俗的理解

增值税的目的是为了对商品或服务在生产过程中增加的价值进行征税。通俗地说&#xff0c;就是每当商品或服务在生产和销售过程中“增值”了一次&#xff0c;政府就要对这部分增值收税。 举个例子&#xff0c;假设一个农场主种了小麦&#xff0c;然后卖给了面粉厂。面粉厂将小麦加…

29、亲身体验Young GC风暴:模拟教程带你走进GC的神秘世界!

29.1、前文回顾 在今天的文章,我们将通过代码演示来展示年轻代的Young GC是如何发生的。同时,我们还将指导大家如何在JVM参数中配置打印对应的GC日志。接下来,我们将通过分析GC日志,逐步解析JVM的垃圾回收机制是如何运作的。 29.2、不可不知的JVM参数设置技巧 首先,根据…

大米cms安装支付逻辑漏洞

1.安装 下载来源&#xff1a;https://www.cnblogs.com/xfbk/p/17910054.html 链接&#xff1a;https://pan.baidu.com/s/1b-Z6RaFBZ6CsSIErY46Pyg?pwdq8qq 提取码&#xff1a;q8qq 注意一下配置就可以了&#xff1a;php5.5apachemysql5.0&#xff0c;主要就是数据库版本要注…

某直聘zp_stoken纯算法还原

郑重声明&#xff1a;本项目的所有代码和相关文章&#xff0c; 仅用于经验技术交流分享&#xff0c;禁止将相关技术应用到不正当途径&#xff0c;因为滥用技术产生的风险与本人无关。 难点概要&#xff1a; 每日切换一次算法&#xff0c;其中包括环境&#xff0c;运行方式等。…

提莫攻击 ---- 模拟算法

题目链接 题目: 分析: 如果两次攻击的时间差是>中毒的持续时间duration, 那么第一次攻击的中毒时间就是duration如果两次攻击的时间差是< 中毒的持续时间duration, 那么第一次攻击的持续时间就是这个时间差假设攻击了n次, 那么我们从第一次攻击开始计算时间差, 那么当我…

下载安装node.js,查看node.js版本

目录 一、下载安装node.js 二、查看node.js版本 三、使用nvm管理node.js版本 一、下载安装node.js 文档 nodejs中文网•学习教程•入门•如何安装 Nodejshttps://nodejs.cn/en/learn/getting-started/how-to-install-nodejs 步骤 1.进入node.js官网 nodejshttps://nodejs.…

【WEEK15】学习目标及总结【Spring Boot】【中文版】

学习目标&#xff1a; 学习SpringBoot 学习内容&#xff1a; 参考视频教程【狂神说Java】SpringBoot最新教程IDEA版通俗易懂 学习时间及产出&#xff1a; 第十五周MON~FRI 2024.6.3 2024.6.4 2024.6.5 2024.6.6 2024.6.7

下载旧版postman(无需要登录,无需联网,即可轻松使用postman)

https://www.filehorse.com/download-postman/old-versions/page-3/ 人工智能学习网站 https://chat.xutongbao.top

推荐系统三十六式学习笔记:03|这些你必须应该具备的思维模式

目录 对关键元素重要性的认识&#xff1a;目标思维和不确定思维总结&#xff1a; 今天我主要带你认识两方面的内容&#xff1a;一个是重新认识推荐系统关键元素的重要性&#xff0c;另一个是要建立起两个思维模式。 对关键元素重要性的认识&#xff1a; 要开发一个推荐系统产…

字符串和字符串函数(2)

前言&#xff1a; 在字符串和字符串函数&#xff08;1&#xff09;-CSDN博客中&#xff0c;已将将字符串和字符函数的使用了解&#xff0c;并且实现模拟了一些字符串的库函数。 接下来将继续深入学习字符串和字符串函数。并且模拟实现一些较为复杂的函数。 可控制字符…

【Linux基础】安装nginx

【Linux基础】安装nginx 文章目录 【Linux基础】安装nginx1、下载nginx2、安装nginx3、使用nginx4、配置nginx环境变量 1、下载nginx 在Nginx的官网的下载页面中(http://nginx.org/en/download.html)&#xff0c;就展示了当前Nginx版本&#xff0c;并提供了下载的连接。 如下&a…

图像处理之基于标记的分水岭算法(C++)

图像处理之基于标记的分水岭算法&#xff08;C&#xff09; 文章目录 图像处理之基于标记的分水岭算法&#xff08;C&#xff09;前言一、基于标记点的分水岭算法应用1.实现步骤&#xff1a;2.代码实现 总结 前言 传统分水岭算法存在过分割的不足&#xff0c;OpenCV提供了一种…

【C语言进阶】动态内存管理及柔性数组

动态内存的开辟在C语言中相当重要的知识 1、为什么会存在动态内存分配 内存的开辟方式&#xff1a; int a20;//在栈空间上开辟4个字节 int arr[10];//在栈空间上开辟40个字节的连续空间 这种开辟空间的方式有两个特点&#xff1a; 1、开辟的空间大小是固定的 2、数组在声明的…

二叉树创建和遍历

个人主页 &#xff1a;敲上瘾-CSDN博客二叉树介绍&#xff1a;二叉树(详解)-CSDN博客 目录 一、二叉树的创建 二、二叉树的遍历 1.前序遍历 2.中序遍历 3.后序遍历 4.层序遍历 三、相关计算 1.总节点个数计算 2.叶子节点个数计算 3.深度计算 一、二叉树的创建 关于…

如何在路由器上安装代理服务:详细教程

如何在路由器上安装代理服务&#xff1a;详细教程 步骤一&#xff1a;通过漏洞进入路由器系统开启Telnet服务使用Telnet登录路由器系统查看系统信息和CPU信息步骤二&#xff1a;交叉编译MIPS程序 Go对MIPS的支持 安装TFTP Server使用BusyBox tftp传输文件在路由器系统中下载编译…

❤机器学习正则化算法的总结。耗时10个小时完成。❤

❤纯 干 货~❤ 目录 纯干货 1、L1 正则化&#xff08;Lasso 正则化&#xff09; 2、L2 正则化&#xff08;岭正则化&#xff09; 3、弹性网络正则化&#xff08;Elastic Net 正则化&#xff09; 4、Dropout 正则化&#xff08;用于神经网络&#xff09; 5、贝叶斯Rid…

海外盲盒小程序:跨文化营销的利器

在全球化的浪潮下&#xff0c;跨境电商正迎来前所未有的发展机遇。作为这一领域中的新兴力量&#xff0c;海外盲盒小程序凭借其独特的魅力和优势&#xff0c;正逐渐崭露头角&#xff0c;成为跨文化营销的利器。本文将探讨海外盲盒小程序在跨文化营销中的应用及其带来的价值。 一…

【30天精通Prometheus:一站式监控实战指南】第16天:snmp_exporter从入门到实战:安装、配置详解与生产环境搭建指南,超详细

亲爱的读者们&#x1f44b;   欢迎加入【30天精通Prometheus】专栏&#xff01;&#x1f4da; 在这里&#xff0c;我们将探索Prometheus的强大功能&#xff0c;并将其应用于实际监控中。这个专栏都将为你提供宝贵的实战经验。&#x1f680;   Prometheus是云原生和DevOps的…

【java11】java11新特性之增强String的API

Java11在String类上引入了一系列新的API增强&#xff0c;这些改进显著提升了开发者在处理字符串时的便捷性和效率。 以下是Java11中增强String API的主要新特性&#xff1a; String.repeat()&#xff1a;重复给定次数的字符串。返回连接的字符串。String.isBlank()&#xff1…

ldap协议(常用于统一身份认证)与dict协议(在线词典)

文章目录 LDAPDICT LDAP LDAP&#xff08;Light Directory Access Portocol&#xff09;&#xff0c;轻量目录访问协议。 目录是一个为查询、浏览和搜索而优化的数据库&#xff0c;它成树状结构组织数据&#xff0c;类似文件目录一样。 目录数据库和关系数据库不同&#xff0c…