element ui 表单校验validate await失效问题

最新推荐文章于 2024-10-17 15:28:05 发布
原创 最新推荐文章于 2024-10-17 15:28:05 发布 · 1.3k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端

原先的调用方式：

$refs.form.validate(async (valid, object) => {})

把调用方式修改一下：

$refs.form.validate().then(async (valid, object) => {})

即可

elementUI 表单校验在await中变成异步的情况
wuyxinu的博客
03-18 5956
引言 最近，在项目中遇到了一个问题。在表单校验中调用await方法，并调用接口，在得到接口的返回值时，返回一些数值给上一层函数。但是由于elementUI的表单验证内部的某些原因，导致本该是同步的方法变成了异步的。 直接上代码 按照正常的理解，这个地方应该是没有问题的，但是从结果上却是啪啪打脸。一直拿不到应该拿到的结果 而后自己写了个demo测试 async buttonTest() { let submitLess = false submitLess = await this.testTest(
Vue表单实现提交预验证（async,await异步报错解决）
weixin_45745641的博客
10-23 4799
我们在写表单的时候，如果表单输入的数据不符合验证要求， 那么就应该阻止其发送请求，这里就需要进行表单预验证 这里就是在提交表单的时候进行预验证，在表单 el-form 中添加属性ref=“addFormRef”，然后利用 this.$refs.addFormRef.validate，如果通过了预验证，则valid为true就可以进行发送请求的操作 async submitForm(formName) { this.$refs.addFormRef.validate(valid => {
封装一个函数式调用的el-dialog弹窗组件
shujiaxing的博客
05-30 2994
项目组大佬封装的弹窗组件，可以省略大量的标签代码，表单重置，visible管理等重复性工作，特别好用，膜拜大佬，学习记录分享一下： 调用很简单： 导入方法； 将弹窗内的表单组件和个性化的弹窗配置参数传入； 在beforeResolve中进行业务请求。 import showOdinDialog from '@/components/OdinDialog' import DetailForm from './detail-form' // 新增，在onclick方法中： showOdinDialog
element - ui 表单提交中使用await报错
versious的博客
08-14 960
正确写法：要在valid前面使用async /**提交 */ handleSubmit() { this.$refs["form"].validate(async valid => { if (valid) { await this.handleUploadFile(); } ApiUpdateOrganBrand(this.f
elementui 表单校验validate不起效果
qq_44792224的博客
12-28 1714
自定义的validator验证方式需要调用callback。验证失败callabck(new Errno(‘’)). 验证成功 callback()
Vue表单预校验 validate方法不生效
热门推荐
m0_47333020的博客
08-29 1万+
在学习Vue秃头的路上,再遇一难 为了实现修改用户功能，绑定单击事件函数 函数里先实现表单预验证功能 期待表单验证正确打印一个true，错误打印一个false 先来错误的测试： 好的可能是意外，再来个正确的 .。。。好的确认是bug了，老规矩哪里有嫌疑哪里打印输出 修改方法代码为 再来以便错误测试 2不见了，再缩小一下范围，看看是不是我英文打错了（经常） 测试 好的可以结案了，valid方法没有执行 半小时后。。。。。错误出处 在自定义检验规则时，由于我对自定义校验规则未理解透彻 在El
element 表单校验formRef中valid无效
12-27
当遇到Element UI表单校验时 `formRef` 的 `valid` 方法无效的情况，通常是因为以下几个原因造成的： #### 1. 动态添加的Vue属性影响 对于 Vue 属性的动态添加，这不仅会影响视图层的更新，也会对 element-ui 表单...
Element-Ul中的Mess消息不能正常显示
weixin_63681863的博客
08-28 2081
注册 使用Element-Ul中的表单，Mess消息不能正常显示预计效果。
Vue2中使用Element UI：集成方案+8个常见坑点避坑指南
本文系统探讨了Element UI与Vue2集成的核心原理与工程实践，深入解析其架构设计、环境搭建、组件优化及生产环境中的典型问题。通过对全局引入与按需加载机制、主题定制、响应式数据同步、生命周期时序冲突等关键技术...
element-puls中表单的rules使用无效什么原因
最新发布
05-05
在Element Plus中使用表单验证规则(rules)失效是常见问题，以下是20个常见原因及对应解决方案，结合官方文档和开发实践总结： ### 一、基础配置问题 1. **prop路径不匹配** ```html <!-- 错误示例 --> 姓名" prop=...
element表单验证validate()方法不执行
budandan1221的博客
10-17 538
自定义表单校验方法中漏加了callback()出错。
elementui el-form自定义校验规则后表单验证this.$refs[formName].validate不生效的问题
有没有认真工作的博客
12-11 1167
明明我输入的值是符合规则的，但是点击确定硬是没有任何反馈，原来是通过验证的时候我少了return callback()
el-form，item填了值validate还一直报错
weixin_45288172的博客
06-12 1052
el-form，item填了值validate还一直报错
el-form的表单验证不生效
qq_45183027的博客
02-28 6896
之前表单验证总是返回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
[已解决]this.$refs.form.validate()不执行
五花漏的博客
03-01 2195
elementUI
Vue Element ui 表单校验时，使用async-await报错。
weixin_48624392的博客
02-22 689
Vue Element ui 表单校验时，使用async-await报错。
关于el-form表单校验明明没问题, 但是await formRef.value.validate()始终不通过
Saehun1994的博客
08-11 993
html结构中v-show应该改为v-if, 至于他们俩的区别我想就不多说了, 点击修改按钮的时候row中的password赋给了userParams(这个值可能是不符合你的表单规范的), 由于v-show的原理是控制display:none的, 所以其实做修改用户的表单校验时候不仅校验了用户名和昵称,也校验了password(即使他被我隐藏了), 而v-if销毁了。这个item组件就不会引发prop="password"这个字段的校验。
【Vue3 + ElementUI】表单校验无效（写法：this.$refs[‘formName‘].validate((valid) =＞{} )）
weixin_47375144的博客
04-09 3321
el-form 中 校验 ，校验无效
element 自定义form表单校验规则导致validate不执行
qq_45576664的博客
07-19 584
element 自定义form表单校验规则导致validate不执行
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值