活动报名小程序_基于Vue+elementUI完成动态表单的校验功用(依据条件动态切换校验

  • 栏目:公司新闻 时间:2021-01-07 14:53 分享新闻到:
<返回列表

基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)       这篇文章主要介绍了Vue+elementUI的动态表单的校验(根据条件动态切换校验格式),本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

前言

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

在线访问:

github(欢迎star): . ..

思考几个问题

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


分享新闻到:

更多阅读

活动报名小程序_基于Vue+elementUI完成动态

公司新闻 2021-01-07
根据Vue+elementUI完成动态性表格的校检作用(依据标准动态性转换校检文件格式) 本文关键...
查看全文

广州凡科互联网科技股份有限公司招聘高

公司新闻 2021-01-07
招聘人数:30职位信息岗位职责:1、根据公司提供的资源,通过公司的电话平台对已有客户的...
查看全文

广州凡科互联网科技股份有限公司招聘商

公司新闻 2021-01-07
招聘人数:24职位信息岗位职责:1、对接好视频平台(头部平台为主)、移动运营商等项目,...
查看全文
返回全部新闻


区域站点: 南丰县长图制作   南宫市在线编辑图片   囊谦县图片加文字怎么制作   南和县怎样抠图   南华县长图制作   南江县在线编辑图片   南京市图片加文字怎么制作   南靖县怎样抠图   南康市长图制作   南乐县在线编辑图片   南陵县图片加文字怎么制作   南宁市怎样抠图   南平市长图制作   南皮县在线编辑图片   南市区图片加文字怎么制作   南通市怎样抠图   南投县长图制作   南雄市在线编辑图片   南溪县图片加文字怎么制作   南阳市怎样抠图   南漳县长图制作   南召县在线编辑图片   南郑县图片加文字怎么制作   那坡县怎样抠图   那曲县长图制作   纳雍县在线编辑图片   讷河市图片加文字怎么制作   内黄县怎样抠图   内江市长图制作   内丘县在线编辑图片   内乡县图片加文字怎么制作   嫩江市怎样抠图   聂荣县长图制作   尼玛县在线编辑图片   尼木县图片加文字怎么制作   宁安市怎样抠图   宁波市长图制作   宁城县在线编辑图片   宁德市图片加文字怎么制作   宁都县怎样抠图   宁国市长图制作   宁海县在线编辑图片   宁化县图片加文字怎么制作   宁晋县怎样抠图   宁陵县长图制作   宁明县在线编辑图片   宁南县图片加文字怎么制作   宁强县怎样抠图   宁陕县长图制作   宁武县在线编辑图片   宁乡市图片加文字怎么制作   宁阳县怎样抠图   宁远县长图制作   农安县在线编辑图片   磐安县图片加文字怎么制作   盘锦市怎样抠图   盘山县长图制作   磐石市在线编辑图片   盘州市图片加文字怎么制作   蓬安县怎样抠图   澎湖县长图制作   蓬莱市在线编辑图片   彭山县图片加文字怎么制作   蓬溪县怎样抠图   彭阳县长图制作   彭泽县在线编辑图片   彭州市图片加文字怎么制作   偏关县怎样抠图   平安县长图制作   平昌县在线编辑图片   平定县图片加文字怎么制作   屏东县怎样抠图   平度市长图制作   平果县在线编辑图片   平和县图片加文字怎么制作   平湖市怎样抠图   平江县长图制作   平乐县在线编辑图片   平凉市图片加文字怎么制作   平利县怎样抠图   平罗县长图制作   平陆县在线编辑图片   屏南县图片加文字怎么制作   平泉市怎样抠图   屏山县长图制作   平顺县在线编辑图片   平塘县图片加文字怎么制作   平潭县怎样抠图   平武县长图制作   萍乡市在线编辑图片   平乡县图片加文字怎么制作   平阳县怎样抠图   平遥县长图制作   平阴县在线编辑图片   平邑县图片加文字怎么制作   平远县怎样抠图   平舆县长图制作   皮山县在线编辑图片   普安县图片加文字怎么制作   浦北县怎样抠图   浦城县长图制作   普洱市在线编辑图片   普格县图片加文字怎么制作   浦江县怎样抠图   普兰县长图制作   普宁市在线编辑图片   莆田市图片加文字怎么制作   迁安市怎样抠图   乾安县长图制作   潜江市在线编辑图片   潜山市图片加文字怎么制作  

友情链接: 贴图软件 在线免费抠图 制作图片加文字的 在线一键抠图

Copyright © 2002-2020 图片加文字怎么制作_怎样抠图_长图制作_在线编辑图片_如何制作水印图片logo 版权所有 (网站地图) 备案号:粤ICP备10235580号