el-form表单校验失效（v-if与v-show导致的问题）

最新推荐文章于 2024-05-07 10:21:25 发布
最新推荐文章于 2024-05-07 10:21:25 发布
阅读量2.7k 收藏 8
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30678943/article/details/111871022
版权
  • 背景：
    项目中有分步多个表单提交 但是表单校验里会出现部分属性校验不生效的问题
    ,如下图所示，“项目路径”、"用户名"字段前已经出现红色星号 表面表单中rules prop对应的字段正确，但是点击下一步并未正常触发校验

在这里插入图片描述
部分表单代码如下，rules 和prop已用红框标识
在这里插入图片描述
在这里插入图片描述
经Google寻找解决方案无果，最后只能去翻翻vue的官方文档，发现了这一行
在这里插入图片描述
尝试在表单中加入key属性，果然成功，那么问题就是出在这里了
因为v-if在两个相同组件且没有key标识唯一性的情况下，会复用已有元素而不是从头开始渲染

开始测试结论
在表单一中添加两个完全一致的输入框
在这里插入图片描述
点击下一步，正常校验
在这里插入图片描述
将信息补完，点击下一步，进入表单2

在这里插入图片描述
再次点击下一步

在这里插入图片描述
可以看到 只有前两个输入框正常校验，原因是表单切换用的v-if控制，但是现在未加key，所以渲染的时候直接复用

ChronEcho。
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
el-form动态表单验证（v-if、v-show导致校验失效的bug）
YSD2468的博客
04-13 2363
今天同事遇见一个很奇怪的问题，vue里面element form表单验证有一个不生效。 一开始我以为是prop没绑定或者绑定错了 ![验证不生效](https://img-blog.csdnimg.cn/20200413202247674.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cH...
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
10-15
在父组件模板中，我们不再使用`v-if`指令来控制子组件`AddEdit.vue`的显示和隐藏，因为频繁切换`v-if`可能导致性能问题。取而代之，我们直接将子组件渲染在页面上，通过`:msg.sync`和`:form`属性将状态和数据传递给...
el-from表单在v-if、v-show和自增、自减表单项的时候，会出现表单校验异常或者串项的异常解决办法
您的博客
03-27 1608
el-from表单在v-if、v-show和自增、自减表单项的时候，会出现表单校验异常或者串项的异常解决办法
VUE el-form 当表单数据多层嵌套，校验不生效或校验一直显示不成功的提示。
最新发布
m0_67477481的博客
05-07 292
我的方法很简单粗暴 ，rules 这里对应的表单数据结构，写出对应的校验数据结构。可以看出表单数据结构是多了一层 orderProductList数组，那么对应的rules也多了这个数组orderProductList。首先我的表单数据是这样的,也就是多了一层orderProductList这个数组。那要怎么校验这个多出来的一层的数据呢？el-form 官方的表单数据是这样的,只有浅浅的一层。
VUE3 v-show 引起的表单验证问题
Admans的专栏
09-03 635
如上：有一个表单，要求用户在选择“任务类型3”时，必须“TaskContent”的内容，选择类型1或类型2时则不做验证要求。上述验证代码，会发现有问题，如果用户选择或者切换到了“类型1”或者“类型2”，同样会对类型3下的。，表单验证好像没问题了，但是程序如果进行了对。进行了其它操作，会引起不必要的错误。解决方法：有人提出了把。进行验证，提示用户“
vue 使用v-if后 或 使用$forceUpdate()强制数据刷新之后导致表单rules校验失效问题
lilang_9920的博客
03-22 2913
vue 使用v-if后 或 使用$forceUpdate()强制数据刷新之后导致表单rules校验失效问题
解决vue页面表单校验不生效，一直不消失的问题
qq_51472580的博客
01-18 1089
今天写个Vue页面，这个校验真的是绝了，两个下拉选择的输入框，一样的写法，一个选择后校验提醒会消失，另一个一直不消失，我用表单校验方法在属性更新后单独校验，这个提示还是不消失，然后我把他俩的位置换了一下，发现就那个位置的表单项校验有问题，真的是离谱。后来看文档，翻百度，发现这是vue为了提高性能去复用相同组件导致的，所以需要给每个表单项一个唯一标识的key,让vue对它们单独操作，如下图所示。这样就完美解决了，救命，被这个校验折磨了俩小时！
el-form v-if控制表单显示隐藏 验证规则失效
风不会停息
06-30 692
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
在vue中使用el-tab-pane v-show/v-if无效的解决
10-15
然而，在实际开发过程中，开发者可能会遇到使用 `v-show` 或 `v-if` 控制 `el-tab-pane` 显示与隐藏时不起作用的问题。这通常是因为 `el-tab-pane` 的渲染机制导致的。 `v-show` 和 `v-if` 都是 Vue 中的条件渲染...
el-form 多层级表单的实现示例
10-14
主要介绍了el-form 多层级表单的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
el-table嵌套 el-form并且加正则校验
06-15
el-table 封装组件
el-form rules表单验证失效问题解决
Ahuuua的博客
11-24 9030
el-form-item中prop属性必须要有才能找到需要验证的字段，另外prop需要与el-input中v-model的参数名称一致，否则会导致rules功能消失 @click中的事件需传入表单名（ref的名称），如@click=submit('taskForm')，js部分点击事件使用方式 submit(taskForm){ this.refs[taskForm].validate(valid=>{ if(valid){} else{} ..
【VUE的Form表单】使用v-if切换控件时，表单校验不生效
weixin_55846296的博客
09-29 3277
【VUE的Form表单】使用 v-if 或者 v-show 切换控件时，表单校验不生效
form表单校验可能出现的问题及解决方案
C422805的博客
08-11 2409
基于elementUi的el-form的校验表单校验目的: 在防止用户犯错的前提下,尽可能让用户更早地发现并纠正问题.以上几种情况是目前项目中可能遇到的情况最多的.针对以上问题一一给出解决方案。
element ui表单验证规则不生效的原因
tl_code的博客
01-30 1547
element ui表单验证规则不生效的原因
el-form与v-if冲突，导致表单校验出问题
weixin_45663702的博客
07-28 952
el-form与v-if冲突，导致表单校验出问题
三分钟细数 el-form 表单校验的坑点，前车之鉴，可助你避坑
热门推荐
本博客纯属个人网络笔记，如对阁下有用，甚喜；否则，关掉即可，不喜勿喷。专心写代码，不做键盘侠！
10-12 1万+
Vue 的 el-form 提供了表单校验功能，通过 :rules 属性设置校验规则，并通过 el-form-item 的 prop 属性绑定校验规则。通过封装，让前端校验更方便。具体使用过程中，有几个容易出错的地方，本文来整理一下。每一个坑都是笔者亲自趟过的，写完本文后，以后应该不会再踏入相同的坑。...
el-form动态表单切换显示/隐藏导致的校验报错
monkey7
12-27 2233
el-form 的el-select change事件 控制el-card里包裹的 el-tab-pane 表单 显示/隐藏
elementUI form表单验证不通过的三个原因
wgf1997的博客
12-23 1813
<el-form :model="form" :rules="rules"> <el-form-item prop="input"> <el-input v-model="form.input"></el-input> </el-form-item> </el-form> 如上面的代码 1、<...
el-form 表单校验 不要在el-form-item下显示
03-21
el-form 是 Element UI 提供的表单组件，用于快构建表单界面。el-form 表单校验是指对表单中的输入内容进行验证，确保用户输入的数据符合预期的格式和要求。 在 el-form 中进行表单校验时，可以通过设置 rules 属性来定义校验规则。每个表单项（el-form-item）可以设置 prop 属性来指定校验规则所对应的字段名。校验规则可以是一个数组，每个规则对象包含 validator 和 message 两个属性，validator 是一个函数，用于自定义校验逻辑，message 是校验失败时显示的错误提示信息。 以下是 el-form 表单校验的示例代码： ```html <template> <el-form :model="form" :rules="rules" ref="form"> <el-form-item label="用户名" prop="username"> <el-input v-model="form.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input type="password" v-model="form.password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> </template> <script> export default { data() { return { form: { username: '', password: '' }, rules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { min: 3, max: 10, message: '用户名长度在 3 到 10 个字符之间', trigger: 'blur' } ], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 20, message: '密码长度在 6 到 20 个字符之间', trigger: 'blur' } ] } }; }, methods: { submitForm() { this.$refs.form.validate(valid => { if (valid) { // 表单校验通过，提交表单 // TODO: 提交表单的逻辑 } else { // 表单校验不通过，显示错误信息 return false; } }); } } }; </script> ``` 在上述示例中，通过设置 rules 属性来定义了两个校验规则，分别对应用户名和密码字段。在 submitForm 方法中，通过调用 this.$refs.form.validate 方法来触发表单校验，校验结果会通过回调函数的参数 valid 返回，如果 valid 为 true，则表示表单校验通过，可以提交表单；如果 valid 为 false，则表示表单校验不通过，需要显示错误信息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值