this.$refs.formRef.validate()数据提交验证时,ref所绑定的表单数据4种解决方案 外加一个欺骗 this.$refs.formRef 验证的方法

本文介绍了在使用Vue进行表单验证时常见的四种错误场景及其解决方案,包括找不到ref值、模型未验证、验证结果非函数及数据结构不一致等问题。

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

Vue this.$refs.formRef.validate() 四种报错场景:

在提交表单结果的时候出现报错


1. 找不到ref值的情况:

Error in v-on handler: “TypeError: Cannot read property ‘validate’ of undefined”
在这里插入图片描述

解决方法

看看
在这里插入图片描述
中的 formRef<el-form ref="formRef"></el-form>中的 formRef是否一致,改为相同。


2. 模型没有验证时的情况:

[Element Warn][Form]model is required for validate to work!

在这里插入图片描述

解决方法

这算是个警告,绑定模型即可
在这里插入图片描述


3. 验证结果不是函数时的问题:

[Vue warn]: Error in v-on handler: “TypeError: this.$refs.formRef.validate is not a function”
在这里插入图片描述
我这里出现问题的原因是在这里插入图片描述
不小心把 ref 写在了 item 中。
写上去即可。

解决方法

ref:model 写在 <el-form> 中即可。


4. 验证数据结构不一致的情况:

Invalid prop: type check failed for prop “model”. Expected Object, got Array
在这里插入图片描述
这里我们,后端需要的数据是对象,而得到的却是数组。
解释一下我的原因,我的表单是由 sleepForm 通过 v-for 得到的,而后端需要的是form验证表单:
在这里插入图片描述

解决方法

重写数据结构 或者 重新绑定验证规则 或者参考方法5:


5. 欺骗 this.$refs.[formRef]()

就是写一个新的表单验证:
在这里插入图片描述
以上4种问题皆可用此方法解决。
这里的新表单 <el-form> 中不需要包含真正的表单数据,算是一种方法,绑定model即可。
这里需要与后面的 this.$refs.forRef 规则对应即可。


这里附带一下本项目代码错误之源的链接https://gitee.com/ashy66/hellomybody/blob/master/src/components/Users/cpsm.vue

不能访问刷新即可。

评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值