el-form 表单校验有时触发有时不触发

于 2024-11-21 18:49:06 发布
阅读量254 收藏
点赞数 2
CC 4.0 BY-SA版权
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/WebZichen/article/details/143952274

使用v-if来控制el-form-item是否显示的时候，或者控制具体显示哪一种情况的时候，一定要给el-form-item写上key属性，不加key 高度会改改变从而导致检验不生效

el-动态表单的校验不触发/只触发了部分项
weixin_45286211的博客
10-12 718
到了这里，多半就可以确定的是元素更新的问题了，在el-form-item外套一层div，进入第二步后元素布局就与第一步不同，从而刷新了所有元素。但是，如果同时套上div，那么相对来说el-form中el-form-item的结构就没有发生变化，就产生了同样的问题，因此套div的方式并不可取。想知道发生了什么导致这种情况，于是去看el-form的源码，发现校验的触发数量，与其属性fields有关系，如图。通过对比重构前的代码，发现和之前的一样，在el-form-item外套一层div就可以了。
el-form表单实现校验
weixin_43589681的博客
06-28 532
前端表单实现， rules 属性传入约定的验证规则，并将 form-Item 的 prop 属性设置为需要验证的特殊键值即可。点击提交时验证表单数据。
el-form的rule无法校验（没有效果）的几个注意点
weixin_42554373的博客
07-02 3940
【代码】el-form的rule无法校验（没有效果）的几个注意点。
el-form表单验证不触发？检查el-form-item上是不是加了prop属性
weixin_65260966的博客
06-13 268
#el-form-item设置rules后验证不生效 #el-form的表单验证不生效 #设置的rules不生效
elementUI form表单页面初始化时就自动校验了
qq_42440919的博客
12-28 6200
form表单 自动校验
uniapp表单验证
weixin_44042792的博客
04-25 9770
表单验证不触发解决办法 第一个参数传入当前表单组件所在的 name，同当前父组件uni-forms-item绑定属性name的值 第二个参数传入需要校验的值，内置组件可以通过$event.detail.value获取到组件的返回值，自定义组件传入需要校验的值即可 第三个参数传入uni-forms组件绑定属性ref的值，通常在多表单的时候需要传入，用来区分表单，如页面中仅有一个uni-forms可忽略 1：直接在input中加入@input="binddata('email',$...
elementUI elfrom表单验证无效、不起作用常见原因
carbonzhao的专栏
09-16 6781
的问题，我就将
el-form表单校验失效，检测不到输入内容
m0_48390697的博客
11-01 2065
el-form表单校验失效，检测不到输入内容检测不到输入内容，很可能是没绑上，尤其是已经输入内容了，还是提示输入为空，这个时候一定要保证对应的数据名称都一样，以官网的例子说明一下。
使用elemeng-ui 中el-form 表单校验的三种方式
七的博客
06-09 3815
表单校验是注册环节中必不可少的操作，表单校验通过一定的规则来确保用户提交数据的有效性，能够防止用户因为操作有误、填写错误数据或者恶意提交数据而占用服务器资源。
el-form表单空格校验，提交校验
qq_42505501的博客
06-21 716
el-form表单空格校验，提交校验校验空格#实现的效果图template里面的代码 export default { name: ‘User’, data() { return { dialogVisibleAdd: false, form: { name: ‘’, sex: ‘’, age: ‘’, addr: ‘’, birthDate: ‘’ }, tableData: [{ name: ‘张三’, age: 15, sex: ‘男’, birthDate: ‘2022-02-08’, addr:
[element-ui]el-form自定义校验-图片上传验证(手动触发部分验证方法)
xxuxioxx的博客
06-03 1098
el-form自定义校验-图片上传验证(手动触发部分验证方法)
element-ui 表单的验证不生效可能有以下几种原因：
qq_70036866的博客
06-20 3912
表单组件没有加入到 el-form 中：element-ui 的表单验证是基于 el-form 组件的，如果没有将表单字段的组件包裹在 el-form 中，验证规则也不会生效。在自定义校验规则中，需要通过调用 callback 函数来返回验证结果，如果验证通过，则调用 callback()，否则调用 callback(new Error('错误信息'))。这里的 rules 属性中的 key 值需要与 form 对象中的字段名一致，否则验证规则不会生效。
el-from表单在v-if、v-show和自增、自减表单项的时候，会出现表单校验异常或者串项的异常解决办法
您的博客
03-27 1753
el-from表单在v-if、v-show和自增、自减表单项的时候，会出现表单校验异常或者串项的异常解决办法
奇怪的bug——elementui的el-form校验生效但提示文字不显示
qq_45840993的博客
07-13 6404
el-form校验生效但提示文字不显示
问题记录 1 页面初始化触发el-form必填校验
weixin_43697849的博客
08-03 1587
rules里触发的方式为change时,赋值数据的格式不一致导致触发校验, 最后也没找到正确的解决方法, 只能用很low方式去解决了。bug: 先编辑table某条数据,然后关闭,再去新增的时候就会触发el-form必填校验, 网上搜了一下是因为。方案2. 初始化页面就清空一次必填校验 , 最后使用了这种方案。方案1. 把trigger改为 blur 失焦后触发。
element表单组件使用v-if控制item显隐时，表单校验不生效的问题
weixin_51409195的博客
11-08 1734
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd HH:mm:ss"/>此处修改了v-if的条件之后，由显示变隐藏再使其显示，就出现了错误。输入了值以后还是一直提示未输入，尝试修改代码将v-if改成v-show之后突然发现可以了。aaa: [{ required: true, message: "请输入名称", trigger: "blur", }, ],
form表单设置了rules，但是发现虽然页面有了红色星号的验证提示，但实际上当失去焦点的时候并未触发校验。form表单验证失败问题
weixin_63896561的博客
02-29 717
可见：类名为bodyInfo_ctn的div下有两个div子元素（两个div内均有el-form表单），分别使用v-if去判断显示form表单的。那么我们只给“子元素一”下的form表单加了两项表单验证，但是发现我们将这两项清空并且失焦时，却没有触发表单校验，只有label的红色星号，但是没有进行实际的表单验证并提示,见下图：大概意思就是说，有相同父元素的子元素，如果v-if和v-else的元素类型相同，最好使用key属性绑定每个子元素。
el-form表单使用error提示校验信息, 重复校验信息不显示
qq_43340606的博客
07-28 2609
error="errorObj.posId",第一次显示错误提示,之后再点击提交后就不显示错误提示了。查看element源码发现el-form-item的error属性监听的是watch。所以注意重新提交表单前,需要重置一下errorObj.posId。然后异步赋值需要显示的校验信息。...
element 表单的部分校验
张梦莹的博客
03-11 3869
在实际的项目中，我们不仅会遇到表单的全校验，有时会遇到只需要对部分字段进行校验。在element中为form的部分校验提供了专门的方法validateField。具体的实现如下。 下面放一波在项目中的使用。 在这里我们只需要对fieldToValidate里的这两个字段进行校验。遍历fieldToValidate，对每个字段进行校验，设置校验函数的cb为promise的成功函数。这样，就算有字...
el-form校验标红不全
最新发布
04-03
### Element-UI el-form 校验部分表单项未标红的原因分析 在使用 `el-form` 进行校验时，如果发现某些表单项未能正确标红，则可能是由于以下几个原因： #### 1. **数据绑定不一致** 当表单字段的数据模型与实际校验规则中的属性名称不匹配时，可能导致校验无法正常触发。例如，在 `rules` 中定义了一个名为 `productName` 的字段校验规则，但如果表单的实际数据模型中对应的键名是 `name`，则该字段不会被标记为错误[^1]。 #### 2. **动态更新表单数据引发问题** 如果通过程序逻辑动态更改了表单的值，而这些变化没有及时通知 Vue 数据响应机制（即未触发视图重新渲染），那么即使校验失败，也可能看不到红色提示信息。这通常发生在直接操作 DOM 或者异步加载数据的情况下[^3]。 #### 3. **调用 resetFields 方法的影响** 调用了 `form.resetFields()` 后会清除所有的验证状态并恢复默认值。如果没有正确初始化或者覆盖了一些必要的参数设置，默认情况下可能使得一些特定条件下的输入框失去其应有的样式表现。 --- ### 解决方案 针对以上提到的各种可能性，可以采取如下措施来解决问题: #### A. 确保数据一致性 仔细检查每一个需要验证的字段是否都已在 data 属性里声明，并且它们的名字要完全对应于 rules 对象里的 key 名称。这样能够保证每次触发表单提交事件的时候都能够找到相应的验证器去执行相应动作。 ```javascript // 正确示例 data() { return { productForm: { productName: '' }, rules: { productName: [{ required: true, message: '请输入产品名称', trigger: 'blur' }] } }; } ``` #### B. 使用 validateField 手动触发单独项检验 对于那些只希望个别项目接受即时反馈而不是整个表格的情况来说，“validateField” 是非常有用的工具之一。它可以让你指定某几个具体的控件来进行独立测试而不影响其他区域的状态显示效果[^2]。 ```javascript this.$refs['productForm'].validateField('productName'); ``` #### C. 动态刷新组件实例 假如遇到因为外部因素改变而导致内部结构同步延迟的现象，可以通过强制销毁再重建当前节点的方式来达到目的——也就是常说的 “key trick”。给包裹着 form 组件外层加上唯一的 :key 值，每当检测到应该更新界面布局之时就随机生成一个新的字符串赋值过去即可实现自动清理缓存的效果。 ```vue <template> <div :key="formKey"> <el-form ref="productForm" :model="productForm" :rules="rules"> <!-- Form Items --> </el-form> </div> </template> <script> export default { data(){ return{ formKey:0, ... } },methods:{ refreshForm(){ this.formKey +=1; } } }; </script> ``` --- ### 总结 通过对上述几种常见情况及其处理办法的学习了解之后，相信大家可以更好地应对 element ui 中关于 el-form 存在的一些潜在隐患以及如何有效规避这些问题的发生。记住始终遵循官方文档指导原则的同时也要灵活运用各种技巧手段相结合才能构建更加健壮的应用程序环境。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值