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


Posted in Javascript onApril 04, 2019

前言

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

在线访问:动态表单校验

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

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

思考几个问题

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

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

实现

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

重点在prop属性

<template v-for="(k,index) in formData.lists">
 <el-form-item
 :ref="index+'concatValue'"
 :prop="'lists.' + index +'.concatValue'"
 :rules="k.rules">
 <el-input v-model="k.concatValue"></el-input>
 </el-form-item>
</template>

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实现动态表单的校验功能(根据条件动态切换校验格式),希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
探讨js中的双感叹号判断
Nov 11 Javascript
ExtJs纵坐标值重复问题的解决方法
Feb 27 Javascript
javascript获取元素偏移量的方法有哪些
Jun 24 Javascript
javascript实现类似超链接的效果
Dec 26 Javascript
jQuery中extend函数的实现原理详解
Feb 03 Javascript
JavaScript删除数组元素的方法
Mar 20 Javascript
js创建数组的简单方法
Jul 27 Javascript
jQuery简单实现MD5加密的方法
Mar 03 Javascript
Vue.js 2.0中select级联下拉框实例
Mar 06 Javascript
JS返回顶部实例代码
Aug 09 Javascript
jQuery实现的电子时钟效果完整示例
Apr 28 jQuery
JavaScript引用类型Function实例详解
Aug 09 Javascript
vue学习笔记五:在vue项目里面使用引入公共方法详解
Apr 04 #Javascript
JavaScript多种页面刷新方法小结
Apr 04 #Javascript
详解easyui 切换主题皮肤
Apr 04 #Javascript
jQuery分组选择器简单用法示例
Apr 04 #jQuery
qrcode生成二维码微信长按无法识别问题的解决
Apr 04 #Javascript
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 #jQuery
vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
Apr 04 #Javascript
You might like
php访问查询mysql数据的三种方法
2006/10/09 PHP
PHP实现根据设备类型自动跳转相应页面的方法
2014/07/24 PHP
PHP中使用strpos函数实现屏蔽敏感关键字功能
2014/08/21 PHP
Yii2压缩PHP中模板代码的输出问题
2018/08/28 PHP
laravel框架分组控制器和分组路由实现方法示例
2020/01/25 PHP
Ext第一周 史上最强学习笔记---GridPanel(基础篇)
2008/12/29 Javascript
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
2012/01/21 Javascript
jquery拖动插件(jquery.drag)使用介绍
2013/06/18 Javascript
使用js操作cookie的一点小收获分享
2013/09/03 Javascript
JavaScript禁止微信浏览器下拉回弹效果
2017/05/16 Javascript
Vue项目总结之webpack常规打包优化方案
2019/06/06 Javascript
Vue最新防抖方案(必看篇)
2019/10/30 Javascript
Vue实现背景更换颜色操作
2020/07/17 Javascript
vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
2020/11/09 Javascript
python将人民币转换大写的脚本代码
2013/02/10 Python
python实现ipsec开权限实例
2014/11/11 Python
python正则表达式中的括号匹配问题
2014/12/14 Python
Python中的time模块与datetime模块用法总结
2016/06/30 Python
Python编程判断这天是这一年第几天的方法示例
2017/04/18 Python
Python 复平面绘图实例
2019/11/21 Python
jupyter notebook插入本地图片的实现
2020/04/13 Python
python如何实现图片压缩
2020/09/11 Python
python中如何打包用户自定义模块
2020/09/23 Python
安装pyinstaller遇到的各种问题(小结)
2020/11/20 Python
pandas实现导出数据的四种方式
2020/12/13 Python
Bootstrap 学习分享
2012/11/12 HTML / CSS
Canvas 像素处理之改变透明度的实现代码
2019/01/08 HTML / CSS
贝玲妃英国官网:Benefit英国
2018/02/03 全球购物
StubHub希腊:购买体育赛事、音乐会和剧院门票
2019/08/03 全球购物
中专自荐信
2013/10/13 职场文书
中专生自我鉴定
2013/12/17 职场文书
公司总经理工作职责管理办法
2014/02/28 职场文书
国际贸易专业求职信
2014/06/04 职场文书
物理教育专业求职信
2014/06/25 职场文书
2014年教师节活动总结
2014/08/29 职场文书
《金钱的魔力》教学反思
2016/02/20 职场文书