vue元素表单规则动态验证示例代码的详细说明

一.导言

简介：在elementUI el-form的使用中，不同的业务可能会生成不同的表单结构，但是它们都存在于同一个表单控件el-form中。

图片介绍：

1.当用户选择单项选择或多项选择时，有五个选项，a、b、c、d和e

2.用户选择简答题时，只会回答问题、答案和分析选项(主要以v-if判断)

问题介绍：当用户选择不同的题库时，会产生不同的表单选项。这时候在提交和验证表格的时候就要根据不同的试题来判断了。此时，需要两个规则来动态验证表单。

解决方案：加载页面时，在计算方法中进行动态判断，直接返回赋值。

代码介绍：

//element ui information El-form : model=' addquetable ' ref=' addquetable ' : rules=' addqueruleslist ' El-form//data定义ruleupdatequsrulessel 3360[]；updatequsrules 3360[]；//computed method computed : {//this . updatequstable . show select自定义标识符updatequrulesist 3360 function(){ if(this . updatequstable . show select){ return this . updatequrulessel；} else { return this . updatequsrules；}}摘要：computed中的值绑定会在表单显示时触发(开始时隐藏)，如果在页面开始加载时触发，将无法判断值并报告错误。事实上，这个问题可以用这个方法解决。

第二，最简单的解决方案

在el-form定义的规则检查字段中，如果你的规则中有被v-if隐藏的字段，规则不会判断隐藏字段选项，只要定义了完整的规则，v-if的隐藏部分就不会进入验证方式。

把简单的问题复杂化！

感谢这位用户：

摘要

以上是边肖介绍的vue元素表单规则动态验证的示例代码。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！