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 相关文章推荐
获取Javscript执行函数名称的方法
Dec 22 Javascript
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
Jun 19 Javascript
jQuery EasyUI API 中文文档 - ValidateBox验证框
Oct 06 Javascript
JavaScript 基础篇之运算符、语句(二)
Apr 07 Javascript
WebApi+Bootstrap+KnockoutJs打造单页面程序
May 16 Javascript
JavaScript中ES6字符串扩展方法
Aug 26 Javascript
微信小程序 教程之WXSS
Oct 18 Javascript
浅谈jQuery框架Ajax常用选项
Jul 08 jQuery
详解Node.js利用node-git-server快速搭建git服务器
Sep 27 Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
Aug 24 Javascript
用vue-cli开发vue时的代理设置方法
Sep 20 Javascript
JavaScript实现单英文金山打字通
Jul 24 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中this,self,parent的区别详解
2013/06/08 PHP
PHP批量上传图片的具体实现方法介绍.
2014/02/26 PHP
php判断当前用户已在别处登录的方法
2015/01/06 PHP
PHP序列化/对象注入漏洞分析
2016/04/18 PHP
jQuery总体架构的理解分析
2011/03/07 Javascript
通过jQuery源码学习javascript(二)
2012/12/27 Javascript
Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)
2013/04/02 Javascript
js获取select默认选中的Option并不是当前选中值
2014/05/07 Javascript
ie 7/8不支持trim的属性的解决方案
2014/05/23 Javascript
Javascript基础教程之比较操作符
2015/01/18 Javascript
jQuery基于$.ajax设置移动端click超时处理方法
2016/05/14 Javascript
jQuery回到顶部的代码
2016/07/09 Javascript
微信小程序 出现47001 data format error原因解决办法
2017/03/10 Javascript
JS中Swiper的使用和轮播图效果
2017/08/11 Javascript
js读取本地文件的实例
2017/12/22 Javascript
vue鼠标悬停事件实例详解
2019/04/01 Javascript
vue父子组件通信的高级用法示例
2019/08/29 Javascript
vue-quill-editor 自定义工具栏和自定义图片上传路径操作
2020/08/03 Javascript
Javascript实现关闭广告效果
2021/01/29 Javascript
跟老齐学Python之使用Python查询更新数据库
2014/11/25 Python
用Python实现数据的透视表的方法
2018/11/16 Python
安装PyInstaller失败问题解决
2019/12/14 Python
tensorflow常用函数API介绍
2020/04/19 Python
使用Keras实现简单线性回归模型操作
2020/06/12 Python
Keras官方中文文档:性能评估Metrices详解
2020/06/15 Python
浅析HTML5:'data-'属性的作用
2018/01/23 HTML / CSS
YesBabyOnline美国:全球性的在线婚纱礼服工厂
2018/05/05 全球购物
美国名表在线商城:Ashford(支持中文)
2019/09/24 全球购物
Tomcat Mysql datasource数据源配置
2015/12/28 面试题
傲盾软件面试题
2015/08/17 面试题
司法助理专业自荐书
2014/06/13 职场文书
大学活动总结模板
2014/07/10 职场文书
我的中国梦演讲稿800字
2014/08/19 职场文书
韩语专业职业生涯规划范文:成功之路就在我们脚下
2014/09/11 职场文书
个人收入证明范本
2014/09/18 职场文书
入党函调证明材料
2015/06/19 职场文书