vue elementui el-form rules动态验证的实例代码详解
一、介绍
简介：在使用elementUI el-form 中，对于业务不同的时候可能会产生不同表单结构，但是都是存在同一个表单控件el-form中。
图片介绍：
1、在用户选择单选或多选时会有A,B,C,D,E五个选项
2、在用户选择简答题时只会题干，答案以及解析选项（主要是通过v-if来进行判断）
问题引入：当用户选择不同的题库时会产生不同的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动态验证的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持！
-
本文向大家介绍AngularJS 输入验证详解及实例代码，包括了AngularJS 输入验证详解及实例代码的使用技巧和注意事项，需要的朋友参考一下 AngularJS 输入验证 AngularJS 表单和控件可以验证输入的数据。 输入验证 在前面的几个章节中，你已经学到关于 AngularJS 表单和控件的知识。 AngularJS 表单和控件可以提供验证功能，并对用户输入的非法数据进行警告。 注
-
本文向大家介绍python验证码识别的实例详解，包括了python验证码识别的实例详解的使用技巧和注意事项，需要的朋友参考一下 其实关于验证码识别涉及很多方面的内容，入手难度大，但是入手后，可拓展性又非常广泛，可玩性极强，成就感也很足，对这感兴趣的朋友们下面跟着小编一起来学习学习吧。 依赖 利用google ocr来识别验证码 但是pytesseract本身识别率不高，而且一般网站的验证码都带有大
-
本文向大家介绍Ajax+Struts2实现验证码验证功能实例代码，包括了Ajax+Struts2实现验证码验证功能实例代码的使用技巧和注意事项，需要的朋友参考一下 众所周知，验证码在我们的生活中都是非常常见的，很多公司都在各种折腾各种各样的验证码，这里简要的用一个小案例来实现验证码的功能（ps:其实我挺讨厌验证码这个东西的）。 今天分享的是通过ajax来动态的验证验证码输入是否正确。我们这里采用的
-
本文向大家介绍vue动态注册组件实例代码详解，包括了vue动态注册组件实例代码详解的使用技巧和注意事项，需要的朋友参考一下 写本篇文章之前其实也关注过vue中的一个关于加载动态组件is的API，最开始研究它只是用来实现一个tab切换的功能，使用起来也蛮不错的。 is 预期：string | Object (组件的选项对象) 用于动态组件且基于 DOM 内模板的限制来工作。 示例： 详见vue AP
-
本文向大家介绍java 反射和动态代理详解及实例代码，包括了java 反射和动态代理详解及实例代码的使用技巧和注意事项，需要的朋友参考一下 一、java中的反射 1.通过反射加载类的属性和方法实例代码: 2.类加载器ClassLoader 3.动态代理 静态代理:代理类和目标对象的类型都是在编译期间确定下来，不利于程序的扩展。同时每个代理类只能为一个接口服务，这样一来程序开发中必然产生过多的代理。
-
本文向大家介绍java Servlet 实现动态验证码图片示例，包括了java Servlet 实现动态验证码图片示例的使用技巧和注意事项，需要的朋友参考一下 整理文档，搜刮出一个java Servlet 实现动态验证码图片的代码，稍微整理精简一下做下分享。 当然这还需要改进成平常见到的验证码 形式，还需要努力 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。