el-form表单不点击提交就会校验问题

最新推荐文章于 2024-06-08 11:45:08 发布
最新推荐文章于 2024-06-08 11:45:08 发布
阅读量582 收藏
点赞数
分类专栏： vue element 文章标签： element vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/lxhmm921/article/details/126646472
版权
本文分享了在使用Vue等前端框架时，如何通过$nextTick方法避免切换单选选项时触发不必要的表单验证，提供了清除表单验证的实例代码.

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

1.问题
切换单选的时候调用了一个接口，出现了会触发下面必填项的校验
在这里插入图片描述
2.解决方法
在这里插入图片描述

this.$nextTick(() => {  
                this.$refs["invoiceForm"].clearValidate()
            })
表单el-form中若有日期时间选择器el-date-picker时校验的坑
Naaaano的博客
12-15 7273
场景：在表单中对日期时间选择器做单个表单项的校验，话不多说上代码 <el-form-item label="随访时间" prop="followUpTime" :rules="[{ type: 'date', required: true, message: '请选择随访时间', trigger: 'change' }]"> <el-date-picker v-model="followForm.followUpTime" type=
el-form表单空格校验，提交校验
qq_42505501的博客
06-21 696
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:
【动态表单】vue动态表单第二次打开没点提交就开始校验了
qq_38411225的博客
01-17 1165
vue动态表单第二次打开没点提交就开始校验了新项目基于vue加ruoyi做动态表单踩坑 新项目基于vue加ruoyi做动态表单踩坑 1 . 动态渲染的组件在el-dialog里面抱着用true或false去控制是否弹出， 在正常组件表单写法，可以在点击事件就打开这个遮罩层。但是因为是动态表单里面表单渲染要先调取一次接口后动态渲染。刚开始也是直接在点击事件打开弹出框但是出现两个问题，一个是同一个表单第二次打开不管写了没写都会触发校验，满屏红框。还有就是如果里面有一个select下拉框第一次打开的表单会造成打
element ui在不点击提交的时候校验表单内容及表单校验重置方法
前端打工人的博客
05-11 1888
//表单规则 guding_rules: { endMonth:[ { required: true,validator: endMonth, trigger: 'blur' } ], }, //自定义表单规则 var endMonth = (rule, value, callback) => { if (value === '') { callback(new Error('请输入预计使用月份和已折旧月份')); } else { //
element-ui中el-form表单验证，只有点击提交按钮时才进行校验
唐唐唐行的博客
04-04 4048
element-ui中el-form表单验证，只有点击提交按钮时才进行校验
表单中上传控件没有设置验证但是触发了验证
编程菜鸟
06-01 499
Please enter a value with a valid mimetype
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
01-21
然后是主要用到了el-form表单有一个清空重置表单数据的事件方法resetField()，在子组件表单弹窗打开的时候清空一下，在关闭子组件表单弹窗的时候还需要调用resetField()去重置表单数据。这样编辑数据之
el-form-item不显示报错$option；label和input不是行内样式显示；el-form表单校验不生效；el-form表单校验正则
killerdoubie的博客
02-27 1364
el-form-item不显示报错$option;label和input不是同行显示；el-form表单校验不生效；el-form表单校验正则
vue针对动态生成的表单el-form进行提交校验
liao3399084的博客
06-08 643
2、前端将得到的各个空闲人员的薪酬方式、出勤类型等进行填写。需要对所有空闲人员的考勤信息进行管理。4、当每个对象校验通过时，予以提交保存。1、后台得到所有的空闲人员名单数组。3、对指定填写内容进行必填项校验。
el-form表单校验失效，检测不到输入内容
m0_48390697的博客
11-01 2037
el-form表单校验失效，检测不到输入内容检测不到输入内容，很可能是没绑上，尤其是已经输入内容了，还是提示输入为空，这个时候一定要保证对应的数据名称都一样，以官网的例子说明一下。
2024年年度关于前端学习与工作的心得体会_前端工作学习体会
2401_84413180的博客
04-26 912
在2019年底到2020年底，这一年多的时间里，本人从移动端开发直接转岗到前端开发，俗话说得好：只要是语言都是相通的，尤其是程序语言相似度更高，因为它们的鼻祖是C语言，做程序开发的都学过C语言，but，对于本人来说，不同语言相当于不同的大山，对别人来讲隔行如隔山，而对于本人来讲则是隔语言如隔山，这句话形容太贴切了，前端开发这座大山差一点要了我的老命，其中的酸甜苦辣慢慢道来给你听。
el-form表单添加自定义校验(非必选情况)
weixin_48215380的博客
03-26 5714
El-form表单添加自定义校验(非必选情况)
【Easyui】解决未对form表单数据进行校验直接就可以提交的问题
sun337939896的博客
02-08 3061
今天遇到了一个问题，完成登录和注册功能时，使用easyui的required：true，validType:'length[6,18]'等等各种校验textbox时，点击登录或者注册按钮，未输入任何值也能提交，然后后台报错。后来发现自己使用的按钮类型为submit，而且easyui并不主动提供校验form表单所有数据之后再提交的方法，但是有校验所有数据是否符合要求的方法。解决这个问题首先要清楚，s...
当表单中有输入框时，阻止el-form表单回车提交功能
n_j_q的博客
08-31 531
阻止el-form表单回车默认提交功能
ant design表单校验踩坑
有问题 ! 请留言 !
02-18 7625
antd的表单校验有很多预设规则,类型如下 string: Must be of type string. This is the default type. number: Must be of type number. boolean: Must be of type boolean. method: Must be of type function. regexp: Must be an ...
解决element el-form打开模态框时就进行表单验证的问题
老电影故事的博客
03-29 3096
写在前面的话 在项目中，经常需要一些校验字段名是否存在的表单验证，比如设置密码时要进行特殊字符校验等 问题描述 最近遇到一个奇怪的问题，在打开修改模态框未做任何修改时，就自动触发了一次校验，提示用户名已存在或者刚打开新增模态框未进行任何操作，就自动进行了校验，提示各个字段不能为空。然后jb测试就给提了一个单 解决方法 我找啊找 找啊找 认真看饿了么文档，发现el-form有一个属性 我就在代码上加上 <el-form :model="resetForm" ref="resetForm" :ru
【每日BUG】解决Cannot read properties of undefined (reading ‘resetFields‘)
yyp_abcd的博客
05-24 5435
在弹窗里使用form表单时，重置使用this.$refs.form.resetFields()会报Cannot read properties of undefined (reading ‘resetFields’)的原因以及处理方法
vue element 重置表单后input框无法输入的问题
weixin_65953411的博客
08-19 1446
vue element 重置表单后input框无法输入的问题
vue中$nextTick/this.$refs获取不到
Suzerk的博客
08-18 4299
本周在使用vue-element-admin重构后管时发现，created中无法直接通过this.$refs获取到用ref命名的子组件的。解决方法是通过this.$nextTick this.$nextTick(() => { this.$refs["dataForm"].clearValidate(); } 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。 任务执行机制： 1）JS分为同步任务和异步任务；
el-form 表单校验只在提交时触发
最新发布
01-24
### 设置 `el-form` 表单校验仅在提交时触发 为了使 `el-form` 的表单校验只在提交时触发而不是实时触发，可以通过调整组件属性以及控制验证逻辑来实现这一目标。具体来说，在定义 `el-form-item` 组件时不启用即时...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值