【无标题】el-form 校验失败原因分析

最新推荐文章于 2024-08-30 09:23:52 发布
原创 最新推荐文章于 2024-08-30 09:23:52 发布 · 764 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #elementui

本文分析了el-form校验失败的常见原因，包括未绑定model、属性名不匹配等，并提供了初始化解决办法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

这里写自定义目录标题

el-form 校验失败原因分析

  1. 没有绑定model
  2. prop属性的值与规则校验中的名称不一致
  3. v-model 绑定的值不是model 绑定对象的属性
    在这里插入图片描述
    在这里插入图片描述
  4. 如果出现第一次有数据校验成功，第一次没有值校验失败，后面赋值了还是校验失败了，那就需要做初始化
    在这里插入图片描述
    因项目需求，通过多方查找资料与交流所得。如有侵权，请联系删除！
李小若98
关注
el-form校验规则，单独验证某一项是否通过校验
qq_47556649的博客
07-08 1580
在上述示例中，点击“验证用户名”按钮时，会调用。存在，说明验证未通过，并输出相关信息；字段进行验证，并在回调函数中检查。方法来验证任何一个特定的表单字段。为空，说明验证通过。
el-form和el-table的rules校验
盈于心胸，充塞天地
05-08 1186
先在el-table外面套一个el-form，在再el-table-column里套一个el-form-item，此时el-form和el-form-item都需要指定rules，不会重复进入校验。el-form的校验，只需要在el-form指定:rules="form.rules"，不要在el-form-item再指定rules，如果指定了会导致重复进入校验。el-table的校验。
解决el-form表单prop和model绑定属性名不一致导致校验失败的问题
cscodeer的博客
10-16 1298
【代码】解决el-form表单prop和model绑定属性名不一致导致校验失败的问题。
el-form的表单验证不生效
qq_45183027的博客
02-28 6818
之前表单验证总是返回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
el-from 表单验证无效果
m0_46975894的博客
11-20 1077
2、 el-form-item 中没有设置prop="tmName" 不设置props验证规则无效。1. el-form 中 ：model='tranmarkparams'
el-form表单中填了值，还弹出校验失败
weixin_38345306的博客
06-26 1146
el-form表单中填了值，还弹出校验失败
elementUI elfrom表单验证无效、不起作用常见原因
carbonzhao的专栏
09-16 6804
的问题，我就将
el-table使用el-form-item校验导致行高增加的问题
盈于心胸，充塞天地
04-29 1079
style="margin-bottom: 0px" 可以在无校验消息时，不增加el-form-item的高度。:inline-message="true"可以在有校验消息时，撑开el-form-item的高度。完整代码（只需要看el-form-item即可）补充完表单数据无报错消息的效果。
el-form 规则校验-清空规则校验
Aa12364567的博客
03-15 989
el-form 规则校验-清空规则校验。
el-table嵌套 el-form并且加正则校验
06-15
el-table 封装组件
vue-elementui组件-el-form表单验证失败问题
no pains,no gains
12-14 2721
待写
vue中使用el-form表当校验失效，表单校验不起作用
qq_40462931的博客
08-30 620
我这个vue文件中存在多个表单，通过v-if判断，来依据步骤显示不同的表单，其中一个表单也有表单校验。那个表单校验是没问题的，看文章是因为表单渲染问题，表单没有从新渲染所导致的。今天开发中遇到这样一个问题，给签约功能表单增加表单校验，给每个表单输入项增加必填校验，结果只有最后一个手机号有必填校验，其他都失效了，没有起作用。开始我以为校验项是否哪里写错了，我一一对比，发现并没有哪里有问题，就是不生效，奇怪了。解决方法就是给每个表单增加一个不同的key，增加后问题确实解决了。
el-form表单校验无效
monparadis的博客
05-21 3658
前言： 当表单填写完成，提交表单，使用表单验证的方法，如果验证通过保存表单，若验证不通过，则提示警告，可是validate，没有任何返回， 控制台也没有任何报错信息 产生原因：自己定义的验证方法，有种情况掉了callback返回（每个条件都需要callback返回，使validate事件进行下去） 定义解释： rule： 是自定义校验的规则 value：是被校验的数据 callback：是每一次校验之后，也就是if语句后都会返回一个callback，将结果给了validate从而继续执行代码，否
解决：v-if条件切换时，input框输入值未清空
weixin_45121510的博客
10-23 3139
用 key 管理可复用的元素： Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外，还有其它一些好处。例如，如果你允许用户在不同的登录方式之间切换： <template v-if="loginType === 'username'"> <label>Username</label> <input placeholder="Enter your username"> </template&gt
el-form动态检验无法生效问题（已解决）
A_9888的博客
09-12 1734
要对el-form里面的字段动态生成校验规则，测试了一系列的骚操作也无法生效，要么是require视图生效了，校验规则还是不生效;
el-form表单多项控制校验；el-form表单新增表单项动态校验；el-form校验动态表单v-if不生效；
热门推荐
i_am_a_div的博客
06-30 1万+
el-form表单新增表单项动态校验；el-form校验动态表单v-if不生效；
element-ui form-item v-model和prop不一致验证问题
jam476的专栏
06-29 3004
form-item v-model和prop不一致验证问题
el-form v-for生成后校验失效
jun的博客
05-12 1237
1、el-form-item中prop属性必须要有才能找到需要验证的字段，另外prop需要与el-input中v-model的参数名称一致，否则会导致rules功能消失
element的表单校验输入框有值但校验未通过的问题
FF_XM的博客
03-22 2184
刚接触前端，碰到很多坑 先说重点，prop中的名称要和ruleForm中对应的字段名一致 上element UI 官方文档 <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.n
el-form内嵌套el-form校验不起作用
最新发布
11-13
在Element UI中，如果你在一个`el-form`组件内部嵌套另一个`el-form`，并且想要进行整体的校验，可能会遇到一些问题。这是因为Element UI默认只对顶级`el-form`的表单数据进行验证。当你在子`el-form`中添加验证规则并提交，这些规则并不会影响到父级的验证状态。 要解决这个问题，你可以尝试以下几个步骤： 1. **手动触发验证**：在子`el-form`的提交事件中，手动调用`this.$refs.form.validate()`来触发整个表单的验证。 ```javascript <template> <div> <el-form ref="parentForm"> <!-- ... --> <el-form :ref="childForm" :model="childFormData"> <!-- ... --> <el-form-item v-if="shouldValidateChild"> <!-- 子form验证项 --> </el-form-item> </el-form> </el-form> </div> </template> <script> export default { data() { return { childFormData: {}, shouldValidateChild: false, }; }, methods: { handleSubmit() { // 先验证子form this.shouldValidateChild = true; this.$nextTick(() => { if (this.childFormData.valid) { // 判断子form是否有效 this.$refs.parentForm.validate(); } }); }, }, }; </script> ``` 2. **自定义验证策略**：如果需要更复杂的验证逻辑，可以考虑将子form单独封装成一个组件，并提供一个方法供外部调用来验证整个表单结构。 3. **父子联动**：如果子form的验证结果对父form有直接影响，你可能需要通过props或者Vuex等状态管理工具来传递验证结果，并相应地更新父级的状态。 请注意，上述方法可能需要结合具体的项目需求进行调整。若还有其他疑问或遇到具体问题，请详细描述以便我能给出准确的帮助。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值