vue中使用el-form表单校验失效问题

最新推荐文章于 2024-08-30 09:23:52 发布
最新推荐文章于 2024-08-30 09:23:52 发布
阅读量1.3k 收藏 2
点赞数
文章标签： vue.js elementui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_65835778/article/details/133823231
版权
文章讲述了在Vue中使用ElementUI的el-form进行表单校验时遇到的问题，主要集中在ref未正确绑定和浏览器对多个相同prop处理导致的验证失效。解决方案是为每个el-form添加唯一的key值以区别对待。
摘要由CSDN通过智能技术生成

记录el-form使用问题

页面中使用el-form进行表单校验时，发现只有password能校验成功，且所有el-form-item项都是相同的写法，刚开始以为是绑定的v-model值写错了，复制其他页面正常代码还是不生效，

注释password后，控制台报错：model is required for validate to work！

注意通常出现这个报错是 ref 写错了，或者把el-form的  :model  属性写成了 v-model，这两个值需要和data中定义的值一样

排除这个错误之后，怀疑是页面有多个表单的原因，注释掉其中一后发现验证功能生效了

百度了下，是因为浏览器在解析时，先解析第一个表单，此时表单上是没有绑定ref，之后再解析第二个表单时，浏览器发现这它的prop和第一个表单的prop一样，所以就认为这两个表单是同一个表单，就没有重新渲染，而ref本身是作为渲染结果被创建的，所以第二个表单没能成功绑定ref，验证就无法生效

最后解决：给两个el-form添加key值区分开

Lavian_
关注
elementUI from表单必填项已有值但是提示信息还在
zhengyun1568的博客
11-18 6294
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="活动名称" prop="name"> <el-input v-model="ruleForm.name"></el-input> </el-form-item> <el-form-it
el-form表单校验失效，检测不到输入内容
m0_48390697的博客
11-01 1939
el-form表单校验失效，检测不到输入内容检测不到输入内容，很可能是没绑上，尤其是已经输入内容了，还是提示输入为空，这个时候一定要保证对应的数据名称都一样，以官网的例子说明一下。
vue中使用el-form表当校验失效，表单校验不起作用
最新发布
qq_40462931的博客
08-30 339
我这个vue文件中存在多个表单，通过v-if判断，来依据步骤显示不同的表单，其中一个表单也有表单校验。那个表单校验是没问题的，看文章是因为表单渲染问题，表单没有从新渲染所导致的。今天开发中遇到这样一个问题，给签约功能表单增加表单校验，给每个表单输入项增加必填校验，结果只有最后一个手机号有必填校验，其他都失效了，没有起作用。开始我以为校验项是否哪里写错了，我一一对比，发现并没有哪里有问题，就是不生效，奇怪了。解决方法就是给每个表单增加一个不同的key，增加后问题确实解决了。
elementUI elfrom表单验证无效、不起作用常见原因
carbonzhao的专栏
09-16 6130
的问题，我就将
el-from 表单验证无效果
m0_46975894的博客
11-20 831
2、 el-form-item 中没有设置prop="tmName" 不设置props验证规则无效。1. el-form 中 ：model='tranmarkparams'
el-form动态检验无法生效问题（已解决）
A_9888的博客
09-12 1541
要对el-form里面的字段动态生成校验规则，测试了一系列的骚操作也无法生效，要么是require视图生效了，校验规则还是不生效;
vue 表单校验不通过问题
qq_41615095的博客
07-07 3958
vue 表单校验
vue element ui From表单校验不生效问题解决
热门推荐
奔跑吧代码
11-17 1万+
vue element ui From表单校验不生效问题解决 仅供参考 自我记录. 解决方案① el-from上要使用:model不要使用v-model <el-form ref="ruleForm" :model="testForm" label-width="100px" :rules="rules"> 解决方案② el-from-item上是否有加prop，并确定prop是不是和编写的规则相同 <el-form-item label="活动名称" prop="name"&gt
el-form动态表单验证（v-if、v-show导致校验失效的bug）
YSD2468的博客
04-13 2511
今天同事遇见一个很奇怪的问题，vue里面element form表单验证有一个不生效。 一开始我以为是prop没绑定或者绑定错了 ![验证不生效](https://img-blog.csdnimg.cn/20200413202247674.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cH...
ElementUI中 el-form 表单面向 多层嵌套数据(实体类或数组) 的校验 validate 异常解决
_
04-22 6504
感谢这篇文章的提示，按照ElementUI官网，对于单层或者两层结构的数据，el-form 表单很容易地在el-form-item的prop属性绑定对应model中的字段，即可完成校验 validate 。但是对于多层嵌套数据(实体类或数组)，诸如以下结构： data1: { field11: '', field12: '', data2: { fi...
Vue使用Element-plus表单v-for校验规则问题
LittleLogan的博客
12-31 2006
Vue使用Element-plus表单v-for循环校验规则
vue element ＜el-dialog＞ 标签 内表单验证坑记录
小学僧的学习笔记
05-08 1143
发生情况：在dialog中写表单验证，dialog框关闭后表单验证还存在 解决： 关闭时直接销毁dialog v-if
Element plus之el-form表单验证失效+动态表单验证+多层级对象属性验证方案
visket2008的专栏
10-18 1万+
旨在解决项目过程中遇到触发el-form验证失效，多级对象属性如何编写验证规则，动态表单控件如何处理。
el-form的表单验证不生效
qq_45183027的博客
02-28 6612
之前表单验证总是返回true不生效，没注意v-if的原因，记录一下 1.原因 1）prop和model绑定的数据名称和rules名称一致; 2）表单验证ref值唯一; 3）使用v-if表单的验证失效一直返回true；在el-form-item加上key值;或者使用v-show来渲染 2.el-form部分 验证规则rules。 //form form:any ={ sponsorId: 0, } //rules验证规则 rules: any = { sponsorId: [{ required
【Vue3 + ElementUI】表单校验无效（写法：this.$refs[‘formName‘].validate((valid) =＞{} )）
weixin_47375144的博客
04-09 2201
el-form 中 校验 ，校验无效
el-form表单校验无效
monparadis的博客
05-21 3538
前言： 当表单填写完成，提交表单，使用表单验证的方法，如果验证通过保存表单，若验证不通过，则提示警告，可是validate，没有任何返回， 控制台也没有任何报错信息 产生原因：自己定义的验证方法，有种情况掉了callback返回（每个条件都需要callback返回，使validate事件进行下去） 定义解释： rule： 是自定义校验的规则 value：是被校验的数据 callback：是每一次校验之后，也就是if语句后都会返回一个callback，将结果给了validate从而继续执行代码，否
表单校验失败原因一：＜el-form-item ＞＜el-form-item / ＞没有给prop属性
2301_77265371的博客
07-31 791
错误代码： 失效情况：<el-form-item ><el-form-item / >没有给prop属性修改后的代码： 如果失效原因是缺少prop,经过以上步骤,正常情况能够正常的进行表单校验。如果表单校验仍旧失效，那么很可能是某处单词拼错，比如把【 required 】拼成 require （作者也犯了这个错误ㄒoㄒ ） 再次修改后： 正常校验结果：
【element-ui】el-form动态表单验证失效
weixin_46447553的博客
11-16 514
el-form表单验证失效
vue3使用el-form表单校验报错Uncaught TypeError: Cannot read properties of undefined (reading 'resetFields')
09-23
vue3使用el-form表单校验报错Uncaught TypeError: Cannot read properties of undefined (reading 'resetFields')是因为在调用this.$refs[formName].resetFields()时，this.$refs[formName]返回的是undefined，而resetFields()是undefined的一个属性，所以会报错。解决此问题的方法是使用this.$nextTick()将回调函数延迟到下次DOM更新循环之后执行，确保在执行resetFields()时表单已经渲染完成。 你可以尝试修改代码如下： methods: { resetLoginForm(formName) { this.$nextTick(() => { this.$refs[formName].resetFields(); }); }, },
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值