【element-ui】form表单验证不生效的原因及解决方案

最新推荐文章于 2025-03-11 15:35:30 发布
最新推荐文章于 2025-03-11 15:35:30 发布
阅读量5.5k 收藏 5
点赞数
分类专栏： element UI
原文链接：https://www.cnblogs.com/wannananana/p/12598152.html
版权

今天在项目中用到element的表单验证，按照官网上的说明写的代码，但是怎么都不会生效，自己对比了代码很久依旧没有什么发现，最后终于找到了问题所在：

在官网中的实例中，我们在绑定方法的时候，将ref绑定的名称ruleForm字符串传入：

点击提交按钮触发的submitForm方法：

这里要注意到，传入的是一个字符串，所以方法中用的是this.$refs[formName] =》this.$refs['ruleForm']，这种形式等同于this.$refs.ruleForm，而我的代码：

没有传入字符串，而是将表单绑定的form对象传入了，这样，当然是会报错的：

此外还要注意的是，传入的参数是ref属性绑定的名称，这里名称恰巧为form，和model绑定的属性名相同，项目中，如果为免混淆其实可以使用其它名称：

Element.UI中from表单验证一直失败，解决问题
qq_41908953的博客
07-28 1753
<el-form :model="form" :rules="rules"> <el-form-item label="账号" label-width="50px" prop="input1"> <el-input placeholder="请输入账号" v-model="form.input1" clearable></el-input> </el-form-item> </el-form> data中 rule
Element-ui表单验证
m0_58550256的博客
07-04 1555
Element-UI表单验证
elementui form表单控件选择不能触发check
u013306050的博客
04-19 277
今天碰到一个vue坑，vue form表单单选控件与多选选控件点击时不能触发check,后来发现是因为初始化绑定moduel对象是，没有把每一个属性声明默认值只声明一个最外层空对象导致。 做个记录
解决 URI is not registered
最新发布
2401_87463146的博客
03-11 324
原因是未设置外部框架 URI 的注册引入。
有关elementui form验证问题，有值却仍然显示不通过
热门推荐
Fture_Bird的博客
01-16 2万+
关于elementui form表单的验证，明明填写了正确的值却显示验证还没通过可能存在的原因（个人看法，有不正确的请指出）： 1、首先需要保证表单上的 :model=" "和prop=" "绑定正确；下面是官网的例子： <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class=...
关于element-ui表单验证失效的问题
Hexin666的博客
11-09 3390
关于element-ui表单验证失效的问题 最近在vue中使用element-ui的form表单验证，出现了某个字段验证无效的问题，验证死活不通过，经过排查，终于找出来问题所在。 提交表单对象的时候通常会有很多字段，而为了图方便，我们有时候只会在data里面定义一个对象，比如ruleForm:{}这样，没有具体定义对象的属性，然后在html里面这样绑定： <el-form-item label="输入" prop="name"> <el-input v-model="ruleFor
vue element el-form resetFields失效问题解决
一只爱吃糖的小羊
12-09 1704
使用el-form的resetFields也就是对整个表单进行重置时，有的输入框没有重置？原来是要给el-form-item添加 prop属性!!! 诶，怎么加了 prop属性还不行？原来... ...
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
10-14
总之，解决Vue和Element-UI的`resetFields()`方法重置表单无效问题，关键在于正确设置`ref`和`prop`属性，并在适当的时候对表单数据进行重置和清除验证结果。理解`resetFields()`方法的机制，以及如何在Vuex环境中...
vue.js element-ui validate中代码不执行问题解决方法
10-18
在Vue.js开发中，Element UI库提供了一套强大的表单组件和验证机制，方便开发者创建交互丰富的表单。然而，在实际使用中，我们可能会遇到validate方法不执行的问题，导致表单验证无法正常工作。本文将深入探讨这个...
element-ui表单校验不生效问题总结
TTST_HTSN的博客
09-02 3164
在使用element这个UI框架的时候，表单校验有时候不生效，头大！！！ 可能存在问题 1.prop命名和form中对应的v-model名字不一样 当v-model使用的名字和prop使用的名字不一样时就会出现无法验证的问题。 2.添加了rules但是没有prop 这个是最致命的，也是最不容易注意的 在这种情况下，当你失去焦点以后不会触发验证规则。 当你加上prop以后这个问题就迎刃而解。 表单验证时机不对 当你回填的时候，明明没有触发验证，但是验证却实际的触发了，原因是： 1.返回值没有该input框
element中重置表单不触发校验和主动触发表单校验
m0_49016709的博客
05-12 3782
重置表单使用this.$refs.form.resetFields() this.form = { userName: '', passWord: '' } this.$refs.form.resetFields() 首次加载取消表单验证 this.$nextTick(() => { // DOM 更新了 console.log("dom update complete") this.$refs["ref"].clearValidate() }) // this.$re
element 表单使用校验 校验失效问题
paidaboluo的博客
08-17 9981
element 表单使用校验 校验失效问题
elementUI中from表单验证不起作用的几种常见错误
m0_37859502的博客
07-29 7801
最近在使用element写表单的校验，但是经常不起作用，总结一下大概经常会出现下面的几种错误。所以在这里记录一下 el-from上要使用:model不要使用v-model el-from-item是否有加prop，并确定prop是不是和编写的规则相同 from绑定的表单是否有初始数据//表单邦迪昂的是addFrom <el-form label-width="120px" ref="menuFrom" :model="dialogOpt.addFrom" size="small" .
elementUI elfrom表单验证无效、不起作用常见原因
carbonzhao的专栏
09-16 6731
的问题，我就将
关于ElementUI表单校验时必填项按照校验规则输入但一直校验不通过问题解决
cabinx的博客
10-09 5913
关于ElementUI表单校验时必填项按照校验规则输入但一直校验不通过问题解决 1.问题描述： vue项目中使用ElementUI的表单form校验单的时候，按照校验规则进行输入，但是一直校验不通过，问题如下图： 2.解决方案： 出现上述问题的根本原因竟然是：v-model与:model的区别问题（v-model： 通常用于input的双向数据绑定，但它并不会向子组件传递数据。:model： 表示绑定自定义属性，它只是将父组件的数据传递给子组件，但没有实现父组件和子组件数据之间的双向
vue element-ui表单验证无效解决方案
Tsinbo1314的博客
11-19 2297
在写页面的时候用到的element-ui库中的表单验证 出现如下问题 表单验证效果已有 但验证功能不正确。 检查与对照官网 发现有二点如下所示 第一，在form上需要绑定对象，绑定规则 第二，在form-item上的prop需要与输入框中的绑定对象命名相同。 改完之后，即可对输入内容进行验证 验证内容格式 可参考element-ui官网 ...
element-ui form表单校验 失败的原因
qq_44886562的博客
12-26 5779
element-ui form 表单校验
Element-Plus自定义表单验证失效原因之一
qq_29983177的博客
08-11 1186
需要保证prop属性名与表单属性名以及验证规则属性名3个地方一致。
element 修改表单值后表单验证无效_表单中Readonly和Disabled的区别详解
weixin_39562928的博客
11-25 1469
这篇文章主要介绍了表单中Readonly和Disabled的区别详解，需要了解相关信息的小伙伴们快来仔细研究下吧表单中Readonly和Disabled的区别详解Readonly和Disabled是用在表单中的两个属性，它们都能够做到使用户不能够更改表单域中的内容。但是它们之间有着微小的差别，总结如下：Readonly只针对input(text / password)和textarea有效，而di...
Element-ui 为什么el-form-item的rules校验规则不生效
12-04
在Element UI中，`el-form-item` 的 `rules` 校验规则可能不生效，当prop（表单字段名）与`v-model`绑定的变量名称不匹配时，就会遇到这个问题。比如在您的例子中，`v-model="userInfo.username"` 和 `prop="name"` 不一致，这可能导致验证逻辑失效。 要解决这个问题，您需要确保以下两点： 1. **更新`prop`的值**：确保`<el-form-item>`标签中的`prop`属性与其对应的`v-model`绑定的变量名称保持一致。在这个例子中，应该是`prop="username"`，而不是`prop="name"`: ```html <el-form-item label="姓名:" prop="username"> <el-input v-model="userInfo.username" style="width: 300px" /> </el-form-item> ``` 2. **更新`userInfo`对象**：在`data`对象中，将`username`属性的键也改为`username`以对应新的`prop`值： ```javascript data() { return { userInfo: { username: '', password2: '' }, // 更改此处 rules: { // ... } }; } ``` 这样，表单验证规则应该会按照预期工作。如果还有其他问题，可能需要检查触发器`trigger`设置是否正确，以及输入的内容是否满足条件。如果有自定义验证函数，也要确保它们已被正确地注册和调用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值