vue elementui el-form rules动态验证的实例代码详解


Posted in Javascript onMay 23, 2019

一、介绍

简介:在使用elementUI el-form 中,对于业务不同的时候可能会产生不同表单结构,但是都是存在同一个表单控件el-form中。

图片介绍:

1、在用户选择单选或多选时会有A,B,C,D,E五个选项

vue elementui el-form rules动态验证的实例代码详解

2、在用户选择简答题时只会题干,答案以及解析选项(主要是通过v-if来进行判断)

vue elementui el-form rules动态验证的实例代码详解

问题引入:当用户选择不同的题库时会产生不同的form表单选项,这个时候在进行表单提交验证的时候就需要根据不同试题类型进行判断,这个时候就需要两个rules来动态进行表单校验。

解决方法:在页面加载的时候在computed方法中进行动态判断直接返回赋值。

代码介绍:

// elementui信息
<el-form :model="addQueTable" ref="addQueTable" :rules="addQueRulesList">
<el-form>
 
// data中定义rules
updateQusRulesSel:[];
updateQusRules:[];
 
// computed方法
computed: {
// this.updateQusTable.showSelect自己定义的标识
 updateQusRulesList: function() {
  if (this.updateQusTable.showSelect) {
  return this.updateQusRulesSel;
  } else {
  return this.updateQusRules;
 }
}

总结:在computed中进行值绑定,当该表单显示的时候就会触发(一开始是隐藏的),如果一开始页面加载的时候就触发会无法进行值判断,从而报错。其实能解决问题,通过该种方法。

二、最简单解决方法

在el-form中定义的rules检验字段,如果你的rules中有字段通过v-if进行隐藏,rules是不会对隐藏的字段选项进行判断,只要定义一个完整的rules就行,v-if隐藏的部分不会进入校验方法中。

把简单的问题复杂化了!!!!!

感谢该用户:

vue elementui el-form rules动态验证的实例代码详解

总结

以上所述是小编给大家介绍的vue elementui el-form rules动态验证的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js数组操作学习总结
Nov 04 Javascript
Json和Jsonp理论实例代码详解
Nov 15 Javascript
易操作的jQuery表单提示插件
Dec 01 Javascript
Bootstrap与KnockoutJs相结合实现分页效果实例详解
May 03 Javascript
JS中使用正则表达式g模式和非g模式的区别
Apr 01 Javascript
js控制文本框禁止输入特殊字符详解
Apr 07 Javascript
javaScript和jQuery自动加载简单代码实现方法
Nov 24 jQuery
node puppeteer(headless chrome)实现网站登录
May 09 Javascript
react在安卓中输入框被手机键盘遮挡问题的解决方法
Sep 03 Javascript
layui输入框只允许输入中文且判断长度的例子
Sep 18 Javascript
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
Feb 03 Javascript
VUE子组件向父组件传值详解(含传多值及添加额外参数场景)
Sep 01 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
May 23 #Javascript
使用vue自定义指令开发表单验证插件validate.js
May 23 #Javascript
微信小程序开发实现消息推送
Nov 18 #Javascript
jQuery操作attr、prop、val()/text()/html()、class属性
May 23 #jQuery
js打开word文档预览操作示例【不是下载】
May 23 #Javascript
仿iPhone通讯录制作小程序自定义选择组件的实现
May 23 #Javascript
判断js数据类型的函数实例详解
May 23 #Javascript
You might like
php下尝试使用GraphicsMagick的缩略图功能
2011/01/01 PHP
php中导出数据到excel时数字变为科学计数的解决方法
2013/02/03 PHP
ThinkPHP控制器间实现相互调用的方法
2014/10/31 PHP
PHP二维数组实现去除重复项的方法【保留各个键值】
2017/12/21 PHP
PHP的mysqli_set_charset()函数讲解
2019/01/23 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
JavaScript 入门基础知识 想学习js的朋友可以参考下
2009/12/26 Javascript
Extjs EditorGridPanel中ComboBox列的显示问题
2011/07/04 Javascript
jquery实现的省市区三级联动
2015/04/02 Javascript
javascript检测flash插件是否被禁用的方法
2016/01/14 Javascript
js纯数字逐一停止显示效果的实现代码
2016/03/16 Javascript
设置jQueryUI DatePicker默认语言为中文
2016/06/04 Javascript
原生js实现轮播图的示例代码
2017/02/20 Javascript
jQuery Chosen通用初始化
2017/03/07 Javascript
BootStrap Table前台和后台分页对JSON格式的要求
2017/06/28 Javascript
深入理解Angularjs 脏值检测
2018/10/12 Javascript
使用微信小程序开发弹出框应用实例详解
2018/10/18 Javascript
详解webpack引用jquery(第三方模块)的三种办法
2019/08/21 jQuery
layui 实现二级弹窗弹出之后 关闭一级弹窗的方法
2019/09/18 Javascript
解决Antd 里面的select 选择框联动触发的问题
2020/10/24 Javascript
Python中的CURL PycURL使用例子
2014/06/01 Python
详解Python Socket网络编程
2016/01/05 Python
Python使用QRCode模块生成二维码实例详解
2017/06/14 Python
python动态进度条的实现代码
2019/07/03 Python
python从ftp获取文件并下载到本地
2020/12/05 Python
使用canvas来完成线性渐变和径向渐变的功能的方法示例
2019/07/25 HTML / CSS
Expedia爱尔兰:酒店、机票、租车及廉价假期
2017/01/02 全球购物
Agoda中文官网:安可达(低价预订全球酒店)
2021/01/18 全球购物
explicit和implicit的含义
2012/11/15 面试题
验房委托书
2014/08/30 职场文书
2015年仓管员工作总结
2015/04/21 职场文书
银行安全保卫工作总结
2015/08/10 职场文书
关于做家务的心得体会
2016/01/23 职场文书
spring boot中nativeQuery的用法
2021/07/26 Java/Android
SpringBoot整合RabbitMQ的5种模式实战
2021/08/02 Java/Android
MySQL脏读,幻读和不可重复读
2022/05/11 MySQL