element手机验证格式_基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)...

前言

开发过程中遇到了一个需求,根据用户选择的联系方式,动态改变输入框的检验条件,并且整个表单是可以增加的

在线访问:动态表单校验

github(欢迎star): https://github.com/Mrblackant. ..

思考几个问题

1.整个表单是可新增的,所以要遍历生成;

2.联系方式(手机/座机)的切换,是要切换后边不同类型输入框还是只改变校验规则(本篇是动态改变校验规则)

实现

1.elementui的form表单实现校验的时候要给当前el-form-item加上prop属性,因为我们是遍历生成的表单,那我们的写法就要写成:

重点在prop属性

:ref="index+'concatValue'"

:prop="'lists.' + index +'.concatValue'"

:rules="k.rules">

2.因为我选择了根据类型动态修改校验规则,而不是切换不同类型的输入框,

注意看下上文代码中的ref和rules,当类型切换时,对应的:rules=k.rules对应的规则也会进行修改,:ref属性是为了切换联系方式类型时,先清除掉之前的提示。

看下不同类型的校验规则,统一的先放到一个地方:

inputRules: {//设置好需要的校验规则

telephone: { pattern: /^1[3-9]\d{9}$/, message: '手机号格式错误', trigger: 'blur' },

phone: { pattern: /^\d{10,12}$/, message: '座机号格式错误', trigger: 'blur' },

QQ: { pattern: /^[1-9][0-9]{4,14}$/, message: 'QQ格式错误', trigger: 'blur' },

mail: { pattern: /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/, message: '邮箱格式错误', trigger: 'blur' }

},

3.如果你的联系方式的值都是必填的,可以先写一个统一的必填校验,省的在步骤2代码里重复写

const baseRule = [

{ required: true, message: '请填写联系方式', trigger: 'blur' }

]

然后等切换校验类型的时候,把必填校验baseRule连接起来:

// 给表单加上新的校验

this.formData.lists[index].rules = [this.inputRules[data]].concat(baseRule)

动态表单校验、动态校验规则这块没有太难的地方,就是有时候会被绕晕,所以拿出来记录一下,大家有更好的方案欢迎指出

总结

以上所述是小编给大家介绍的基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式),希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

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

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

相关文章

matlab中rb代表什么意思,你知道“川藏线上”女游客举着“求RB”的牌子是啥意思吗?暗语啊!...

现在穷游好像一种旅行圈的时髦,很多人都想着穷游能够锻炼人的意志,能够促进人与人的交流与合作,能够在路上遇到不一样的精彩,能够发现人性与真善美。现在穷游的人不在少数,尤其是在川藏线上,想要穷游入藏的…

vscode 智能打印_vscode智能提示

vscode智能提示官方版支持部分的语法高亮,现在官方C插件更新比较快, Visual Studio for C / C代码的扩展增加了C / C在Visual Studio语言支持。vscode智能提示功能介绍语言服务代码格式(铛格式)自动完成(实验)符号搜索转到定义/声明查看定义/声明类/方法…

重节点差商matlab,数值分析佳习题(含答案).doc

数值分析佳习题(含答案)2008信息与计算科学专业计算方法习题参考解答 江世宏编PAGEPAGE 25第一章 绪论姓名 学号 班级习题主要考察点:有效数字的计算、计算方法的比较选择、误差和误差限的计算。1 若误差限为,那么近似数0.003400有几位有效数字?(有效数字…

matlab 柴油机仿真,用MATLAB/SIMULINK实现柴油机及其控制系统的动态仿真

第 16卷(1998)第 3期 内 燃 机 学 报 Transaetions of CSICE VDl_16(1998)No.3 ④ f 用 MATLAB/SIMULINK 实现 柴油机 及其控制系统的动态仿真 980045 细描 述 了空气流量 率、燃 空 比、指 示热 效率、摩擦损 失、平均指 示 压力输 出、发 动 机 动力 学…

华为主题锁屏壁纸换不掉_华为手机总多出莫名的照片?那是因为这3个设置没关闭,赶紧自查...

随着华为在科技、5G以及数码领域的表现越来越好,使用华为手机的人也越来越多。不知道你在使用华为手机的过程中,有没有这样的感觉,华为手机总是多出莫名其妙的照片,即使删除了下次还会出现。如果有这样的情况,可能是手…

tomcat 正常关闭_Tomcat的带有守护程序和关闭钩子的正常关闭

tomcat 正常关闭我的最后两个博客讨论了长时间轮询和Spring的DeferredResult技术,并且为了展示这些概念,我将我的Producer Consumer项目中的代码添加到了Web应用程序中。 尽管该代码演示了博客所提出的观点,但其逻辑上确实包含大量漏洞。 除了…

php nginx 域名重定向,Nginx默认虚拟主机、用户认证、域名重定向

Nginx默认虚拟主机定义默认虚拟主机配置文件,在http下面加入include vhost/*.conf在/usr/local/nginx/conf/下创建目录#mkdir vhost/ //创建vhost目录#cd vhost/ //进入目录#vim aaa.com.conf //编辑文件server{listen 80 default_server; // 有这个标记的就是默认虚拟主机serv…

Java:使用SingletonStream获得性能

仅具有一个元素的Java流有时会在应用程序中造成不必要的开销。 了解如何使用SingletonStream对象并为其中某些此类流获得十倍的性能,并了解如何同时简化代码。 背景 Java 8中的Stream库是有史以来Java语言最强大的功能之一。 一旦您开始了解它的多功能性和所产生的…

多元线性回归分析spss结果解读_多元线性回归分析理论详解及SPSS结果分析

当影响因变量的因素是多个时候,这种一个变量同时与多个变量的回归问题就是多元回归,分为:多元线性回归和多元非线性回归。这里直说多元线性回归。对比一元线性回归:1.1多元回归模型:1.2多元回归方程1.3估计的多元回归方…

gilab无法解析php文件,gitlab重新设置域名后就无法访问了。

gitlab-ctl status ,查看是nignx启动不成功。查看gitlab-ctl tail日志&#xff0c;一直报这个错误 &#xff1a;> /var/log/gitlab/nginx/current <2020-01-06_09:12:15.16681 /opt/gitlab/embedded/sbin/nginx: error while loading shared libraries: libutility_mini_…

nginx请求转发被拒绝_nginx反向代理(请求转发-URL匹配规则)

反向代理适用于很多场合&#xff0c;负载均衡是最普遍的用法。nginx 作为目前最流行的web服务器之一&#xff0c;可以很方便地实现反向代理。当在一台主机上部署了多个不同的web服务器&#xff0c;并且需要能在80端口同时访问这些web服务器时&#xff0c;可以使用 nginx 的反向…

php调用pdf2html,php html2pdf

*安装composer运行html2pdf时&#xff0c;readme里面建议按照composer-setup.exe安装过程中出现openssl的问题&#xff0c;在php.ini中开启相应extension即可&#xff0c;路径写绝对路径&#xff0c;否则按默认路径找不到在html2pdf的文件路径下&#xff0c;cmd运行composer in…

electron 打开调试_Electron 应用调试指南

Electron 是一个基于 Node.js 和 Chromium 的开源框架&#xff0c;用于构建桌面应用&#xff0c;开发者可以使用 web 技术(HTML&#xff0c;JavaScript 和 CSS)完成整个应用的开发。许多知名桌面应用基于 Electron 实现&#xff0c;如 VSCode&#xff0c;Slack 和 GitHub Deskt…

java中方法的命名_Java方法中的参数太多,第5部分:方法命名

java中方法的命名在上一篇文章 &#xff08;有关处理Java方法中过多参数的系列文章的 第4部分 &#xff09;中&#xff0c;我将方法重载视为一种向客户提供需要较少参数的版本的方法或构造函数的方法。 我描述了该方法的一些缺点&#xff0c;并建议从方法重载中摆脱出来以使用不…

oracle lms进程 内存,Oracle RAC 内存融合(Cache Fusion)

原标题&#xff1a;Oracle RAC 内存融合(Cache Fusion)内存融合核心进程LMS(Global Cache Service Process)&#xff1a;这个进程负责完成GCS的大部分工作&#xff0c;它会维护GRD中数据块资源的信息&#xff0c;完成数据块在实例之间的传递工作&#xff0c;相关消息的发送和接…

sougou ubuntu 优麒麟_搜狗输入法 Linux – V2.3 版发布,完美适配优麒麟 19.10

搜狗输入法 Linux – V2.3 版发布&#xff0c;完美适配优麒麟 19.10fenshezhuiyi2 2019年10月19日 暂无评论 阅读 4,346 次昨天已发布优麒麟操作系统 19.10 版本&#xff0c;该版本集成了全新的控制面板和软件商店&#xff0c;不知道大家是否已下载体验。今天小编要为大家介绍一…

oracle多条sql语句常量,如何在Oracle中一次执行多条sql语句

有时我们需要一次性执行多条sql语句&#xff0c;而用来更新的sql是根据实际情况用代码拼出来的解决方案是把sql拼成下面这种形式&#xff1a;beginupdate TB_VG set seq 1, vessel_id Jin14, vessel_type TRACK where batch_number 20837 and train_id 0233086;update TB_…

JDK 11:新的默认收集方法toArray(IntFunction)

“ JDK 11 Early-Access发行说明 ”表明JDK 11的Early Access Build 20在Collection接口上包括一个新的默认方法 &#xff0c;该方法 “允许将集合的元素转移到所需运行时类型的新创建的数组中”。 这个新的默认方法 [ Collection.toArray&#xff08;IntFunction&#xff09; …

获取清空textarea的文字内容_运用|你会做 词云图(文字云) 吗?

词云图,也叫文字云,是对文本中出现频率较高的“关键词”予以视觉化的展现,词云图过滤掉大量的低频低质的文本信息,使得浏览者只要一眼扫过文本就可领略文本的主旨。今天&#xff0c;兰色就分享一下词云图的做法。制作步骤&#xff1a;1、打开词云图网站打开网页https://wordart…

oracle today函数,oracle日期函数集锦

一、 常用日期数据格式1.Y或YY或YYY 年的最后一位&#xff0c;两位或三位SQL> Select to_char(sysdate,Y) from dual;TO_CHAR(SYSDATE,Y)--------------------7SQL> Select to_char(sysdate,YY) from dual;TO_CHAR(SYSDATE,YY)---------------------07SQL> Select to_…