vue elementui el-form rules动态验证的实例代码详解
更新时间：2019年05月23日 16:46:11 作者：CoderYin
在使用elementUI el-form 中，对于业务不同的时候可能会产生不同表单结构，但是都是存在同一个表单控件el-form中。这篇文章主要介绍了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动态验证的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要为大家详细介绍了vue组件生命周期，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
这篇文章主要介绍了Vue解析剪切板图片并实现发送功能,本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2020-02-02
这篇文章主要介绍了vue中使用swiper,左右箭头点击没有效果问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
上传文件，基本上用了input框就可以解决，但大文件应该怎样上传呢，一次性上传明显不现实，因为每次一断网，那就会从头开始上传，所以切片势在必行，关键就是如何切，怎么保障文件数据不会丢失，同时优化上传保障机制，本文就来给大家讲讲如何上传大文件2023-07-07
本篇文章主要介绍了详解用vue.js和laravel实现微信授权登陆，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
最近做了个项目需要做数字滚动增加的效果，刚开始接到这个项目还真是懵了，后来发现实现代码很简单的，下面小编给大家带来了vue 实现数字滚动增加效果的实例代码，需要的朋友参考下吧2018-07-07
这篇文章主要介绍了Vue项目打包部署到apache服务器，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-02-02
这篇文章主要给大家介绍了如何解决vue3项目打包后部署后某些静态资源图片不加载问题,文中通过图文结合的方式讲解的非常详细,有需要的朋友可以参考下2024-05-05
本文主要介绍了一文详解Vue中加上key后发生什么，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
这篇文章主要介绍了在vue中实现禁止回退上一步,路由不存历史记录，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
最新评论