基于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 相关文章推荐
javascript中将Object转换为String函数代码 (json str)
Apr 29 Javascript
js给页面加style无效果的解决方法
Jan 20 Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
Jul 11 Javascript
bootstrap实现图片自动轮播
Dec 21 Javascript
Angular工具方法学习
Dec 26 Javascript
微信小程序实现tab切换效果
Nov 21 Javascript
在移动端使用vue-router和keep-alive的方法示例
Dec 02 Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
Sep 25 Javascript
JavaScript仿京东秒杀倒计时
Mar 17 Javascript
vue 手机物理监听键+退出提示代码
Sep 09 Javascript
vue 封装面包屑组件教程
Nov 16 Javascript
js删除指定位置超链接中含有百度与360的标题
Jan 06 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
golang与PHP输出excel示例
2016/07/22 PHP
mac系统下安装多个php并自由切换的方法详解
2017/04/21 PHP
javascript检测浏览器flash版本的实现代码
2011/12/06 Javascript
javascript 实现键盘上下左右功能的小例子
2013/09/15 Javascript
js加入收藏以及使用Jquery更改透明度
2014/01/26 Javascript
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
2015/05/12 Javascript
iframe跨域通信封装详解
2015/08/11 Javascript
js实现选中页面文字将其分享到新浪微博
2015/11/05 Javascript
jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题
2016/05/31 Javascript
全面介绍javascript实用技巧及单竖杠
2016/07/18 Javascript
html+js+highcharts绘制圆饼图表的简单实例
2016/08/04 Javascript
点击页面任何位置隐藏div的实现方法
2016/09/05 Javascript
ReactNative页面跳转实例代码
2016/09/27 Javascript
ros::spin() 和 ros::spinOnce()函数的区别及详解
2016/10/01 Javascript
在html中引入外部js文件,并调用带参函数的方法
2016/10/31 Javascript
jQuery中on方法使用注意事项详解
2017/02/15 Javascript
Express之get,pos请求参数的获取
2017/05/02 Javascript
cordova入门基础教程及使用中遇到的一些问题总结
2017/11/14 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
2018/01/20 Javascript
axios post提交formdata的实例
2018/03/16 Javascript
Vue.js样式动态绑定实现小结
2019/01/24 Javascript
用Vue.js方法创建模板并使用多个模板合成
2019/06/28 Javascript
Python版实现微信公众号扫码登陆
2020/05/28 Javascript
vue 二维码长按保存和复制内容操作
2020/09/22 Javascript
[02:25]DOTA2英雄基础教程 虚空假面
2014/01/02 DOTA
Python原始字符串(raw strings)用法实例
2014/10/13 Python
python+opencv实现的简单人脸识别代码示例
2017/11/14 Python
python 调用有道api接口的方法
2019/01/03 Python
Asics日本官网:鬼冢八喜郎创立的跑鞋运动品牌
2017/10/18 全球购物
思想品德自我鉴定
2013/10/12 职场文书
竞选学习委员演讲稿
2014/09/01 职场文书
校园游戏活动新闻稿
2014/10/15 职场文书
校运会广播稿
2015/08/19 职场文书
担保书范文
2019/07/09 职场文书
win10安装配置nginx的过程
2021/03/31 Servers
MySQL中distinct和count(*)的使用方法比较
2021/05/26 MySQL