el-form表单rule校验失效问题小结

最新推荐文章于 2024-01-25 11:04:31 发布
原创 最新推荐文章于 2024-01-25 11:04:31 发布 · 1.9k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #前端

项目中遇到一个Vue组件问题，具体表现为某一行的第二个input字段的校验rule未生效。原因可能是el-form先于el-form-item渲染，由于v-if的存在导致延迟渲染，从而使得rule失效。为解决此问题，将v-if提升到最外层，等待接口返回后再整体渲染form。然而，在demo工程中未能复现该问题。

项目中遇到

  • 问题：某一行的第2个input校验rule没有生效
  • 原因：那一行el-form-item 有v-if(需要等接口结果) 猜测是因为 el-form先渲染，而el-form-item渲染延迟导致rule失效
  • 解决：将v-if设置到最上层，这样等接口结果好了之后，再全部重新渲染form
  • 但是奇怪的是，demo工程没有再现
element rules不生效
Macao7_W的博客
08-23 4630
当页面中存在多个<el-form>时，所加的rules不会生效（尚未找出什么原因，大神请指教）。 正确做法：将<el-form-item>放在一个<el-form>里。 <el-form-item label="学生姓名" prop="stName"> <el-input v-model="form.stName" placeholder="请输入学生姓名" /> </el-form-ite
vue el-form 遇上 v-if，表单校验不生效问题
且听风吟的博客
08-18 8977
el-form遇上v-if，表单校验不生效问题
关于el-form中的rules未生效问题的解决方法
沉睡的博客
05-14 2201
关于el-form中的rules未生效问题的解决方法 特别提醒，<el-form-item>中prop=“paymentProductName”的值一定要跟对应的v-model=“ruleForm.paymentProductName”一致，即两个“paymentProductName”得一样，否则会导致rules失效 ...
ElementUI 实现动态表单数据校验（已解决）
热门推荐
qq_49002903的博客
07-26 1万+
日常问题记录：ElementUI 实现动态表单数据校验（已解决）
elementUI elfrom表单验证无效、不起作用常见原因
carbonzhao的专栏
09-16 6878
的问题，我就将
关于el-form中的rules未生效问题
qq_43452525的博客
08-30 2190
el-form validate无效的可能原因及解决方法
el-radio加表单验证无效
qq_30351747的博客
12-27 1922
el-radio加表单验证无效 代码 <el-form :model="form" :rules="rules"> <el-form-item label='时间' props='timeVal'> <el-radio-group v-model="form.timeVal"> <el-radio><el-radio> </el-radio-group> </el-form-it
v-if 导致 elementui 表单校验失效问题解决
jiangjunyuan168的博客
01-25 2038
在使用 elementui 表单的过程中，某些表单项需要通过 v-if 来判断是否展示，但是这些表单项出现了检验失效的问题。 1、给需要 v-if 判断的表单项添加 key 值 2、将校验规则直接绑定在 el-form-item 上 3、v-show 代替 v-if 这种方法存在一个问题，就是如果 v-if 判断的表单项中如果存在相同字段的项就会导致重复校验的问题，所以这种方法需要在判断的表单项字段都不相同的情况下使用。
element-ui的form表单校验踩坑
weixin_47783830的博客
08-21 1378
今天查看项目，发现了一个小小的bug，之前从来没注意过，记录下。 管理系统的修改跟增加功能用的同一个表单，只是通过判断显示不同的内容。而修改时跟增加时的验证也不一样，由此，出现了一些奇怪的事情，先看看代码： 这是我改完之后故意写错的问题： <el-form :ref="fuleCalorificForm" :rules="rules" label="left" :model="fuleCalorificForm" la
以下代码如何进行表单校验 <el-form-item prop="list"> <el-form-item prop="list.name"> </el-form-item> </el-form-item>
最新发布
11-04
因此，如果希望整体校验（例如，提交表单时，外层el-form-item显示错误信息，包含所有内部字段的错误），那么可能需要自定义校验逻辑，并且只使用外层el-form-item，内层则用普通div包裹，不使用el-form-item。...
el-form-item 的 prop 和 el-input 表单的属性不一致如何校验
03-08
嗯，用户问的是当el-form-item的prop和el-input的v-model属性不一致时...通过确保`prop`与`v-model`路径严格一致，或使用自定义校验规则，即可解决校验失效问题。建议优先使用标准路径匹配方式以保证校验系统的可靠性。
el-form的rule无法校验（没有效果）的几个注意点
weixin_42554373的博客
07-02 4064
【代码】el-form的rule无法校验（没有效果）的几个注意点。
el-form表单校验无效
monparadis的博客
05-21 3689
前言： 当表单填写完成，提交表单，使用表单验证的方法，如果验证通过保存表单，若验证不通过，则提示警告，可是validate，没有任何返回， 控制台也没有任何报错信息 产生原因：自己定义的验证方法，有种情况掉了callback返回（每个条件都需要callback返回，使validate事件进行下去） 定义解释： rule： 是自定义校验的规则 value：是被校验的数据 callback：是每一次校验之后，也就是if语句后都会返回一个callback，将结果给了validate从而继续执行代码，否
el-form rules表单验证失效问题解决
Ahuuua的博客
11-24 9926
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{} ..
el-form-item v-for :rules 校验失效
weixin_35757531的博客
01-13 1297
在使用v-for循环渲染el-form-item时，需要注意:rules的值应该是一个函数，而不是一个静态的数组。这样可以确保每一项都有自己独立的校验规则。 例如： <el-form-itemv-for="(item, index) in items" :key="index" :rules="getRules(index)"> methods: { getRules(ind...
el-form的表单验证不生效
qq_45183027的博客
02-28 6908
之前表单验证总是返回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-form中的rules在输入框中不生效解决
weixin_44713688的博客
04-07 1036
出现的问题： 有数值但是失焦后依然显示“请选择…” 原来的代码： 然后发现原因就是，prop的值应该和v-model的值一样才可以 修改后即： 解决问题
el-from 表单验证无效果
m0_46975894的博客
11-20 1133
2、 el-form-item 中没有设置prop="tmName" 不设置props验证规则无效。1. el-form 中 ：model='tranmarkparams'
element-ui form表单校验 失败的原因
qq_44886562的博客
12-26 5965
element-ui form 表单校验
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值