华山资源网

vue elementui el-form rules动态验证的实例代码详解
网络编程 2024/11/11 佚名
3 1

一、介绍

简介：在使用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动态验证的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com