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

最新推荐文章于 2024-08-01 10:45:26 发布
最新推荐文章于 2024-08-01 10:45:26 发布
阅读量1.7k 收藏 2
点赞数
分类专栏： pits 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qubes/article/details/128020187
版权

项目中遇到

  • 问题：某一行的第2个input校验rule没有生效
  • 原因：那一行el-form-item 有v-if(需要等接口结果) 猜测是因为 el-form先渲染，而el-form-item渲染延迟导致rule失效
  • 解决：将v-if设置到最上层，这样等接口结果好了之后，再全部重新渲染form
  • 但是奇怪的是，demo工程没有再现
snowDreamzzz
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
el-form动态表单验证（v-if、v-show导致校验失效的bug）
YSD2468的博客
04-13 2422
今天同事遇见一个很奇怪的问题，vue里面element form表单验证有一个不生效。 一开始我以为是prop没绑定或者绑定错了 ![验证不生效](https://img-blog.csdnimg.cn/20200413202247674.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cH...
vue el-form 遇上 v-if，表单校验不生效问题
且听风吟的博客
08-18 8294
el-form遇上v-if，表单校验不生效问题
通过v-if渲染的element-ui表单，校验规则不生效的问题
maoge_666的博客
04-18 827
通过v-if渲染的element-ui表单，校验规则不生效的问题
el-form 中的rules规则校验validate不起作用的可能原因
最新发布
Aa12364567的博客
08-01 343
el-form 中的rules规则校验validate不起作用的可能原因。每一步判断校验后都需要callback()
关于el-form中的rules未生效问题
qq_43452525的博客
08-30 1838
el-form validate无效的可能原因及解决方法
elementUI elfrom表单验证无效、不起作用常见原因
carbonzhao的专栏
09-16 5758
的问题，我就将
el-form表单校验无效
monparadis的博客
05-21 3499
前言： 当表单填写完成，提交表单，使用表单验证的方法，如果验证通过保存表单，若验证不通过，则提示警告，可是validate，没有任何返回， 控制台也没有任何报错信息 产生原因：自己定义的验证方法，有种情况掉了callback返回（每个条件都需要callback返回，使validate事件进行下去） 定义解释： rule： 是自定义校验的规则 value：是被校验的数据 callback：是每一次校验之后，也就是if语句后都会返回一个callback，将结果给了validate从而继续执行代码，否
el-form-item v-for :rules 校验失效
weixin_35757531的博客
01-13 1078
在使用v-for循环渲染el-form-item时，需要注意:rules的值应该是一个函数，而不是一个静态的数组。这样可以确保每一项都有自己独立的校验规则。 例如： <el-form-itemv-for="(item, index) in items" :key="index" :rules="getRules(index)"> methods: { getRules(ind...
el-form表单校验失效，检测不到输入内容
m0_48390697的博客
11-01 1892
el-form表单校验失效，检测不到输入内容检测不到输入内容，很可能是没绑上，尤其是已经输入内容了，还是提示输入为空，这个时候一定要保证对应的数据名称都一样，以官网的例子说明一下。
Element-ui 为什么el-form-item的rules校验规则不生效
星云
10-04 7045
# 原因 ## 错误 ```html <el-form-item :label="label" prop="id"> <el-input v-model="form.id" :placeholder="`请输入${label}`" :rules="rules"/> </el-form-item> ``` ## 改正 ```html <el-form-item :label="label" :rules="rules"
element-ui的form表单校验踩坑
weixin_47783830的博客
08-21 1207
今天查看项目，发现了一个小小的bug，之前从来没注意过，记录下。 管理系统的修改跟增加功能用的同一个表单，只是通过判断显示不同的内容。而修改时跟增加时的验证也不一样，由此，出现了一些奇怪的事情，先看看代码： 这是我改完之后故意写错的问题： <el-form :ref="fuleCalorificForm" :rules="rules" label="left" :model="fuleCalorificForm" la
uview 弹出框放表单 验证失效_基于element-ui对话框el-dialog初始化的校验问题解决...
weixin_39682301的博客
12-22 2391
不刷新页面重新打开el-dialog时，如果我们绑定了rules或者某个值需要required，它总会自动校验。查看了多个博文，发现常用的有两种解决方法(下列方法都可以在其他博文查看，不再细写，如有需要请自行查询)：1.给dialog套上v-if ；2.在关闭dialog时,监听关闭回调,清除校验。我在自己的项目里使用了上述两种方法，都不太好用，自己琢磨出了另一种方法：调用dialog打开的回调m...
uview 弹出框放表单 验证失效_基于vue2.0前端组件库element中 el-form表单 自定义验证填坑...
weixin_39767386的博客
12-22 3544
我在平时使用过程中，遇到的问题。自定义表单验证出坑:1. validate/resetFields 未定义。原因：1：要验证的DOM，还没有加载出来。2：有可能this.$refs[ruleForm].validate() 方式不识别。需要使用: this.$refs.ruleForm.validate(); 这种方式，不是你们想要的结果。解决方法1： 要验证的DOM，还没有加载出来。this.t...
el-form的rule无法校验（没有效果）的几个注意点
weixin_42554373的博客
07-02 3345
【代码】el-form的rule无法校验（没有效果）的几个注意点。
el-form rules表单验证失效问题解决
Ahuuua的博客
11-24 9249
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的表单验证不生效
qq_45183027的博客
02-28 6547
之前表单验证总是返回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 736
2、 el-form-item 中没有设置prop="tmName" 不设置props验证规则无效。1. el-form 中 ：model='tranmarkparams'
el-form rules 验证失败可能原因
weixin_459417989的博客
11-21 1357
<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&g
el-form自定义校验规则后表单验证validate不生效导致代码跑不起了人快跑了
m0_60817860的博客
01-22 987
全部正确代码在下方： 2.1正确示范： 我们关注这个checkName方法，在最后的时候有else{callback（）}，此时是可以正常操作的 可以校验，也可以正常执行方法 此时我们尝试将这个else的内容注释掉，我们再次执行此时校验是可以执行的 但是我们的validate方法是根本执行不了一点的，甚至控制台毫无显示，只有之前校验username的方法可以正常发送打印 也就是说，这个点击提交的按钮里面的逻辑一个字母都没跑起来，给我整麻了
vue使用el-form的rule表单校验手机号码
09-15
在Vue中使用ElementUI的el-form进行表单校验手机号码的步骤如下： 1. 在el-form中使用el-form-item包裹手机号码输入框，设置prop属性为"phone"以与表单校验规则集对应。 ```html <el-form ref="form" :model=...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值