element 解决表单验证会直接跳过但不报错

最新推荐文章于 2023-09-21 18:00:06 发布
最新推荐文章于 2023-09-21 18:00:06 发布
阅读量360 收藏
点赞数
分类专栏： element 文章标签： 前端 elementui 表单验证
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38778882/article/details/131461032
版权

问题
今天突然发现一个问题，点击提交表单时没反应，即没有报错，也没有往下走
经排查，发现执行到 this.$refs[formName].validate((valid) => {}）这个方法的时候就直接跳出了这个方法
解决办法
点击提交的时候，提交的表单数据没有问题，排除数据问题
那就是数据验证的问题，发现使用了一个自定义验证
经过排查发现自定义验证的 callback 逻辑有缺陷，因为在 element 中自定义的验证规定最后必须走callback() 函数，但是那个子项中有一种情况会走不到 callback()，就导致 validate 方法没法向下执行，就会直接跳过
。。。
如果你也遇到了这个问题，最好就检查一下自定义验证的逻辑功能是否完善

燕燕燕燕燕
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用element-ui +Vue 解决 table 里包含表单验证的问题
09-16
本文将详细介绍如何使用Element-UI和Vue.js来解决在表格中包含表单验证的问题。 首先，我们需要理解Element-UI的表单验证机制。`el-form`组件是表单的基础，它通过`:model`属性绑定数据模型，并通过`:rules`属性...
ElementUI中为什么使用this.$refs.form.validate验证成功却直接跳过
热爱编程、热爱生活、热爱探索
02-17 3225
在写一个Vue练手项目时，我使用rulse对表单中用户输入的数据进行校验，但莫名奇妙就发现：当我点击提交表单时，表单中的数据都验证成功了，但是却发现没有任何反应！经过debug发现，程序在运行到。回调函数，如果没有找到该回调函数，就会直接跳过箭头函数中的逻辑。这一行时，直接就跳过了(○´･д･)ﾉ  直接蒙圈了😵。后，并不会直接走箭头函数中的逻辑，而是直接走。最终确定了问题的罪魁祸首是。时，它会先寻找该函数中的。函数，然后补齐未添加上的。校验表单时，并且使用了。
elementUI form表单验证 跳过某一项
risingfine的博客
04-15 2270
selectValidField () { let isPass = true this.$refs['ruleForm'].validateField('a', (err) => { if (err) { isPass = false } }) this.$refs['ruleForm'].validateField('b', (err) =&...
element 表单验证会直接跳过但不报错的解决办法
华唐的博客
02-03 1100
背景 公司的一个页面中有这样的需求，一共四个表单，一个提交按钮，点击提交按钮，四个表单验证后提交 问题 第二个表单的验证没有执行，debugger时发现执行到 this.$refs[formName].validate((valid) => {}）这个方法的时候就直接跳出了这个方法 解决办法 经过排查发现第二个表单的某个子项的自定义验证的callback逻辑有缺陷，因为在element中自定义的验证规定最后必须走callback（）函数，但是那个子项中有一种情况会走不到callback（），就导致va
ElementUI表单校验不生效
weixin_52688746的博客
11-19 1万+
问题：vue中使用element-ui进行表单校验的时候，必填项按照规则输入，但是一直不通过，问题如下图： 解决办法： 出现问题的原因是 v-model 和 :model 的区别问题（ v-model 通常是用于 input 的双向绑定，但是它不会向子组件传递数据； 而 ：model 表示绑定自定义的属性，它只是将父组件的数据传递给子组件，没有实现父子组件间的数据双向绑定）。我在 form 表单中使用了 v-model 所以出现了错误，正确使用如下： <el-form :model="logi
elementUI提交表单时焦点跳转至第一个校验不通过处
彼岸花开
07-15 326
this.$refs[formName].validate((valid) => { if (valid) { } else { setTimeout(()=>{ var isError= document.getElementsByClassName("is-error"); is...
解决vue+ element ui 表单验证有值但验证失败问题
10-15
主要介绍了vue+ element ui 表单验证有值但验证失败，本文通过实例代码给大家分享解决方案，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
element 结合vue 在表单验证时有值却提示错误的解决办法
08-28
Element 结合 Vue 在表单验证时有值却提示错误的解决办法 Element 是一个功能强大的前端 UI 框架，结合 Vue.js 可以快速开发复杂的 Web 应用程序。然而，在使用 Element 结合 Vue 进行表单验证时，有时可能会遇到...
Vue-element中表单自定义校验的this.$refs[formname].validate不生效
HTML5_student的博客
12-20 1万+
今天遇到的问题 在做表单提交的时候，会出现this.$refs[formname].validate方法不生效，通过debug，原来是校验那里出了问题。 在表单规则制定那里我需要自定义校验，用到了validator属性，使用这个的时候要注意一个地方，就是必须要返回一个回调函数。 使用valiator校验规则时，切记一定要返回一个回调函数，使用了if，即使没有else的需求，也要写一个else返回回调函数。否则表单的validate是不会生效的 model : 绑定整个表单model值 rules : 整个表
elementui表单的验证问题
小飞的博客
09-21 471
​ 然后我在网上搜了一下解决办法，大部分都是说用this.$refs[‘form’].resetFields()重置一下就行，我试了但是不行，然后我去看了一下官方文档，重置是重置了，但是是重置为初始值，但是我仔细去研究了一下这个初始值，其实就是第一次给form表单赋值时，它在页面上渲染出来的值。​ 虽然已经能解决这个问题了，但是还是有一个问题，如果用户使用的时候正好网络不好，但是修改对话框已经打开了，以前的数据还没有加载出来，如果这时候用户胡乱操作很容易造成异常，所以还是等拿到数据后再打开对话框最好。
el-form表单动态校验(场景: 输入框根据单选项来动态校验表单 没有选中的选项就不用校验)
qq_41421033的博客
09-07 2498
关键点: 跟正常校验流程不同的是, el-form-item标签内的required和rules都要加上判断条件。场景: 输入框根据单选项来动态校验表单。没有选中的选项就不用校验。正题部分-表单动态校验。
vue有关elementui form表单rules验证问题，有值却仍然显示不通过
热门推荐
web15085181368的博客
03-02 1万+
帮同事解决一个vue表单验证的问题，利用了rules，但是填完内容还是一直提示不能为空的错误，情况如下图所示： 1、检查:rules ref，例如本黎:rules=“rules” ref="reluForm"是否与data中定义的一致 2、检查prop值与绑定的属性一致，例如本例中prop="title"中title与data中rules规则绑定的属性一一对应 3、检测表单是否一致，例如本例中:model="addForm"与data中定义的表单名是否一致 以上都检查过没有问题 <el-form :
ant-design-vue 踩雷合集
weixin_43828487的博客
01-07 209
解决方法： 使用全选onSelectAll（selected, selectedRows, changeRows）和onSelect（selected, selectedRows, changeRows）更新接收的数据。原因：在onChange（selectedRowKeys, selectedRows）方法中接收的选中值，此方法中的selectedRows不记录分页之前的数据，选中的数据被更新掉了。原因：table表格的rowKey属性绑定的值不对，应该绑定选中的值的字段。
el-form 清除部分必填项校验 clearValidate
Shimeng_1989的博客
04-14 4463
el-form 清除部分必填项校验 clearValidate。
vue element表单去掉某一项的校验
总结前端开发中遇到的问题，分享前端知识
04-06 4447
// 方式一 this.$refs.ruleForm.clearValidate('item1') // 方式二 this.$refs.ruleForm.fields.map(i => { if (i.prop === 'item1') { i.clearValidate() } })
el-form 表单项前面显示星号 但又不校验这一项代码怎么实现
killerdoubie的博客
06-19 1763
el-form 表单项前面显示星号 但又不校验这一项代码怎么实现
el-form表单验证跳过指定项的验证
anny_mei的博客
08-19 2053
由于我项目的原因,企业和个人个表单不一样,通过给isView的true和false来控制 首先企业默认的是true,所以可以在created里面判断 created() { if (this.isView) { // 个人表单校验失效 this.rules.personName[0].required = false } }, 然后再在methods方法里面点击了个人表单按钮时再判断 handelPerson() { this.isView =
element表单 去掉表单某一项校验
LJJONESEED的博客
10-27 1827
el-form-item 标签中存在v-if 时，条件为true不需要校验。
element-ui里的正则表单验证提交大坑
YaoQing222的博客
07-19 439
前言 这几天在修改别人的代码时。发现了父子通信的表单提交验证，一看，自己都懵了，怎么用了表单，但是提交的时候全写些判断呢，没办法了，只能改了！ element表单验证提交 1.基础表单验证提交 <el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="年龄" prop="age"
element中表单验证不生效
最新发布
10-09
在Element中，表单验证通常需要使用表单验证规则（rules）来指定验证条件。如果表单验证不生效，可能有以下几个原因： 1. 表单项没有设置正确的验证规则。请确保在表单项上设置了正确的验证规则。验证规则可以使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值