基于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获取图片实际宽高及根据图片大小进行自适应
Aug 11 Javascript
javascript实现页面内关键词高亮显示代码
Apr 03 Javascript
谈谈我对JavaScript DOM事件的理解
Dec 18 Javascript
JavaScript基础知识之方法汇总结
Jan 24 Javascript
微信小程序 PHP后端form表单提交实例详解
Jan 12 Javascript
运用jQuery写的验证表单(实例讲解)
Jul 06 jQuery
React Native验证码倒计时工具类分享
Oct 24 Javascript
详解vue.js数据传递以及数据分发slot
Jan 20 Javascript
浅析Angular19 自定义表单控件
Jan 31 Javascript
laydate时间日历插件使用方法详解
Nov 14 Javascript
layui 弹出层值回传解决方式
Nov 14 Javascript
Element MessageBox弹框的具体使用
Jul 27 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
第十一节 重载 [11]
2006/10/09 PHP
文章推荐系统(三)
2006/10/09 PHP
PHP-CGI进程CPU 100% 与 file_get_contents 函数的关系分析
2011/08/15 PHP
2个Codeigniter文件批量上传控制器写法例子
2014/07/25 PHP
php禁止直接从浏览器输入地址访问.php文件的方法
2014/11/04 PHP
php页面跳转session cookie丢失导致不能登录等问题的解决方法
2016/12/12 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
2017/07/19 PHP
PHP超级全局变量【$GLOBALS,$_SERVER,$_REQUEST等】用法实例分析
2019/12/11 PHP
让焦点自动跳转
2006/07/01 Javascript
javascript不同页面传值的改进版
2008/09/30 Javascript
javascript Array.remove() 数组删除
2009/08/06 Javascript
location.search在客户端获取Url参数的方法
2010/06/08 Javascript
javascript采用数组实现tab菜单切换效果
2012/12/12 Javascript
jQuery拖动图片删除示例
2013/05/10 Javascript
利用JS判断用户是否上网(连接网络)
2013/12/23 Javascript
bootstrap学习笔记之初识bootstrap
2016/06/21 Javascript
微信小程序实战之上拉(分页加载)效果(2)
2017/04/17 Javascript
通过命令行生成vue项目框架的方法
2017/07/12 Javascript
基于JavaScript中字符串的match与replace方法(详解)
2017/12/04 Javascript
Vue2.0用户权限控制解决方案的示例
2018/02/10 Javascript
使用Angular CLI从蓝本生成代码详解
2018/03/24 Javascript
浅谈angularJS2中的界面跳转方法
2018/08/31 Javascript
Vue-cli assets SubDirectory及PublicPath区别详解
2020/08/18 Javascript
react实现复选框全选和反选组件效果
2020/08/25 Javascript
vue实现树状表格效果
2020/12/29 Vue.js
Python日期时间对象转换为字符串的实例
2018/06/22 Python
详解Python利用random生成一个列表内的随机数
2019/08/21 Python
Expedia挪威官网:酒店、机票和租车
2018/03/03 全球购物
27个经典Linux面试题及答案,你知道几个?
2014/03/11 面试题
档案接收函
2014/01/13 职场文书
珍惜资源保护环境的建议书
2014/05/14 职场文书
无刑事犯罪记录证明范本
2014/09/29 职场文书
延安红色之旅心得体会
2014/10/07 职场文书
2014年反洗钱工作总结
2014/11/22 职场文书
新闻稿件写作技巧
2015/07/18 职场文书
quickjs 封装 JavaScript 沙箱详情
2021/11/02 Javascript