关于element-ui表单校验个别元素一直被忽略,无法成功校验的问题

最新推荐文章于 2023-06-27 11:36:10 发布
最新推荐文章于 2023-06-27 11:36:10 发布
阅读量709 收藏
点赞数 1
分类专栏： 我开发中遇到的bug 文章标签： javascript elementui vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45608918/article/details/116194009
版权
在使用Element-UI进行表单校验时，遇到一个字段marketingType始终无法通过校验，尽管校验规则已配置。问题源于页面中存在两个名为formData的ref，第二个ref覆盖了第一个，导致营销类型字段的校验失效。通过将第二个formData的v-show改为v-if，使其在不满足条件时不渲染，从而解决了校验问题。
摘要由CSDN通过智能技术生成

关于element-ui表单校验个别元素一直被忽略,无法成功校验的问题

项目场景：

真功夫功夫会中台系统的某次任务开发遇到的bug

问题描述：

昨天接到新的版本的任务需求,有个任务是要在这个表单中加一个多选框,并且加上非空校验
然后我就开始写这个功能.后面发现在页面中加入这段代码之后保存一直不被判断
我仔细看了表单校验的配置,发现没什么问题.ref有传递,表单的v-model也有绑定 form-itme的prop也有绑定

在这里插入图片描述

校验规则也有配置
在这里插入图片描述
在这里插入图片描述
但是却能保存成功
而同样在配置中的name却能正常校验
在这里插入图片描述

也就是说我这个marketingType的校验没生效

原因分析：

后来

最低0.47元/天 解锁文章
初心者f
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
element-ui 表单的验证不生效可能有以下几种原因：v
qq_70036866的博客
06-20 1230
表单组件没有加入到 el-form 中：element-ui 的表单验证是基于 el-form 组件的，如果没有将表单字段的组件包裹在 el-form 中，验证规则也不会生效。在自定义校验规则中，需要通过调用 callback 函数来返回验证结果，如果验证通过，则调用 callback()，否则调用 callback(new Error('错误信息'))。这里的 rules 属性中的 key 值需要与 form 对象中的字段名一致，否则验证规则不会生效。
vue+elementui 表单中有个按照条件隐藏组件校验判断
ldqwananxh的博客
12-06 4761
遇到了vue+elementui 表单中有个按照条件隐藏的下拉框，隐藏的时候 不需要校验，显示的时候需要校验，下面代码将purchaseType隐藏显示操作，自定义验证方法validatePurchaseType 这里 !this.showRentPrise作为条件然后在判断传进来的值进行校验即可 data() { const validatePurchaseType = (rule, value, callback) => { debugger
Element-UI踩坑---部分表单校验失效,required=true,且栏位也出现了红色星号*,提交的时候有一部分栏位有校验一部分没有
DayDayUp4399的博客
06-27 857
在el-form-item 加上key, :key=“isShow+‘prop名称’” ,简单来说让变化后的key也发生改变,就能重新渲染,让校验恢复正常。原因: 大概是使用了v-if,v-show,三元表达式等,对校验的el-form-item做了动态的判定。
element-ui 表格添加校验
Rrui777的博客
08-12 1108
摘要其他博客的片段，进行添加自定义表单报错信息
vue roleForm的rules不起作用/部分起作用【限制表单中输入的长度】【普通表单变验证表单】
pursuingSun的博客
04-27 1245
今天用vue+elementUI做前端，要用到验证表单，我由于已经写了表单信息，所以在普通表单的基础上去做修改。但是发现验证表单的id输入两条验证要求【非空和输入长度】，只有第一条起作用，并且没有随着输入的改变而改变。经过一番查找发现以下几点需要修改的地方： 绑定： 包括两部分：整个表格的绑定以及属性的绑定： 整个表格使用【:model】绑定表格内容，使用【:rules】绑定规则，不可以使用v-model！！ 属性绑定使用【prop】 举例： <el-form :model="form" :.
elementUI表格加了表单校验导致表格当前被校验单元格无法对其样式处理
Hello_WangXJ的博客
03-24 1215
elementui中表单校验有的通过，有的不通过的问题
huakaiwuxing的博客
08-17 687
情景是这样的：两个tab标签下有不同的表单数据，这两个不同的表单数据在一个form里边绑定，这个form是嵌套对象的形式，并且tab标签的切换使用的v-if，v-else来判断的 在其中一个form表单的为空校验的时候，很奇怪，有的校验到了，有的没有； 解决方案一：在这个需要为空校验的一块内容中加了个form，即form嵌套 参考：https://blog.csdn.net/gnosed/article/details/105678880 解决方案二：将v-if换为v-show 猜测：被认为含有自
elementUi重置表单某个字段不引起校验
11-01 864
是表单项的事件，所以，只需要通过ref拿到这个表单字段，就可以重置里面的内容，并且不会触发校验。在官方闻文档里面，找了好久，，，，，才发现有一个表单单独充值的事件。所以需要单独为其重置操作。
element ui form表单项显隐，校验（不该）触发问题
zhl_cafe的博客
09-07 3110
element ui form表单项显隐，校验（不该）触发问题。
关于使用element表单进行动态表单验证的问题（表单元素显示隐藏）
weixin_47526923的博客
11-05 2595
关于element表单进行动态表单验证的问题 这篇文章主要是对我在使用element表单验证时遇到的一个验证失败的问题总结。 业务： 页面上点击新增时弹出一个对话框，对话框有由form表单和切换按钮构成，打开或关闭切换按钮会隐藏或者展示form表单中的输入框。整个form表单都需要做表单验证，根据切换按钮的的状态改变表单验证规则。 问题 默认状态下（不改变切换按钮的状态），直接点击提交表单验证是没有任何问题的，但是当你改变了切换按钮状态就会导致表单验证失效。 原因及解决方法 因为切换按钮状态的改变导
el-form动态表单切换显示/隐藏导致的校验报错
monkey7
12-27 2269
el-form 的el-select change事件 控制el-card里包裹的 el-tab-pane 表单 显示/隐藏
element-ui的form表单校验
minnyYu的博客
12-31 4559
element-ui表单校验步骤
elementUI自带的表单验证---解决特定情况下忽略指定表单项的验证
string佳佳的博客
03-25 4170
html部分 <el-form :model="form" :rules="rules" ref="form" label-width="100px"> <el-form-item label="姓名" prop="name"> <el-input v-model="form.name" placeholder="请输入姓名"&gt...
vue element表单去掉某一项的校验
总结前端开发中遇到的问题，分享前端知识
04-06 4471
// 方式一 this.$refs.ruleForm.clearValidate('item1') // 方式二 this.$refs.ruleForm.fields.map(i => { if (i.prop === 'item1') { i.clearValidate() } })
elementui表单内不验证某个指定字段
feifantiantang的博客
01-06 2459
先上代码： 1、先取出针对手机号的验证 2、this.$refs["elForm"].validate((valid) => { if (valid) { this.formData.level = ""; putObj(this.formData).then((response) => { this.$message.success("修改成功"); ...
element 去掉form表单的某一项单个form-Item校验
卡卡罗特的博客
08-13 6251
element 去掉form表单的某一项单个校验
ElementUI关于表单验证不起作用的问题解决
⭐【World of Yeeking】⭐
12-09 2506
在项目中用到ElementUI的表单验证时，发现离开焦点后获取的输入框内容是空的，表示就是获取不到输入的字段。 以下是官网给出的表单验证的步骤和相关的代码。这是上半部分的。 script部分的代码如下： 重点来了：在仔细检查后发现，element-ui的表单校验规则中，el-form-item绑定的prop必须和该item下的表单元素绑定的v-model值的名称一致。也就是我把formData里的属性名改成和rules里的属性名一致就可以了！！！但是，在官网中并没有说到这个名字需要一致的问题。 官网的使用
elementui form表单el-form-item使用v-show提交时rules验证错误的问题
在车上在路上的博客
04-14 5821
我们在使用el-form的时候常
踩坑 - Vue 使用 v-show 失效和element表单验证失效
aiyang1214878408的博客
06-07 1657
使用element的form表单了，通过v-if控制表单元素的显示隐藏，发现点提交时表单校验失效，打印发现会直接通过校验。明明是空数据怎么会通过呢？？! 然后排查原因发现是 v-if显示会导致表单验证失效。那好，那我就改成v-show。 改成v-show之后又发现判断条件没有生效，页面显示所有的元素，这又是为啥。然后又排查发现 本质上应该是因为 v-show 不支持 template标签，ok，改成div。最好解决了使用 v-show 失效和element表单验证失效。...
element-ui 表单校验
最新发布
09-10
element-ui 提供了很多表单校验的组件和方法，可以帮助开发者实现前端表单的校验功能。 首先，element-ui 提供了一些内置的校验规则，比如必填项、最大长度、最小长度、数字等。你可以在表单组件中使用这些规则来...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值