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

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

activiti表单设计器_基于Vue,ElementUI开发的一款表单设计器
介绍基于Vue,ElementUI开发的一款表单设计器,提高表单开发效率的利器,让开发者从枯燥的表单代码编写中解放出来工具地址: http://tools.xiaoyaoji.cn/form Gi ...
VUE element-ui之form表单自定义验证11位手机号码（封装验证规则）
步骤: 封装验证规则: export function isvalidPhone(phone) {const reg = /^1([38][0-9]|4[014-9]|[59][0-35-9]|6[2 ...
Vue+Element-UI 使用 Vform 表单设计器
1.表单设计器基础字段建议 //主键id Int id (guid id) //表单数据 String FormJson //表单名称 String FormName //表单描述 String F ...
springcloudspringboot+vue+elementui+flowable+自定义表单+VUE流程设计器
源码 springboot:https://gitee.com/zjm16/zjmzxfzhl springcloud:https://gitee.com/zjm16/zjmzxfzhl-cloud ...
vue+elementUI实现自定义表单模板组件（一）
前言如下图,实现一个可以自定义的表单.本文以实现思路为主,并未提供完整代码. 思路 1.页面布局为左中右布局:左边显示可以定义的表单控件,中间显示预览效果,右边则为选中某个控件后可以编辑的属性.如下 ...
基于jeecgboot的支持online表单审批的功能正式发布
基于jeecgboot的flowable流程支持online表单审批线上发布一个完整的版本,利用原有online表单功能,通过选择现有online表单数据进行审批申请与操作,基本支持各自表单包括主从表 ...
element ui 前台模板_用 Vue+ElementUI 搭建后台管理极简模板
本文由图雀社区成员https://blog.csdn.net/crxk_blog.csdn.net 写在前面此篇文章为一篇说明文档,不是教你从零构建一个后台管理系统,而是基于一个实际项目,已经搭建 ...
vue+elementUI实现自定义表单模板组件（二）
前言在上一节主要解决了表单模板的创建问题,在数据库中的存储格式为字符串. 主要是通过前端处理,保存为 json 数组的字符串,形如 [{label:"文本",required:t ...
spyder开多个程序_【程序源代码】基于Vue+ElementUI web开发框架
" 关键字:开发框架 vue web 开发框架" 正文:开发框架 web 开发框架 vue 01 - 基于 Vue + ElementUI 的web项目工程框架专注于中台系统 ...

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

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

最新文章

热门文章