Vue中this.$refs[formName].validate((valid) =＞{}不执行的错误

最新推荐文章于 2024-09-17 16:27:00 发布
最新推荐文章于 2024-09-17 16:27:00 发布
阅读量4.3k 收藏 3
点赞数 4
分类专栏： 项目相关
原文链接：https://www.cnblogs.com/qianxiaoniantianxin/p/14628626.html
版权

Vue.js 表单验证 回调函数 前端开发 JavaScript
关键词由CSDN通过智能技术生成

今天遇到一个this.$refs[formName].validate((valid) =>{} 无效的问题

当验证通过的时候点确定按钮没有报错，也没有任何反应

代码：
在这里插入图片描述
在这里插入图片描述
当验证不通过的时候：第632行有打印false
在这里插入图片描述
但是当验证都通过的时候：第632行没有打印
在这里插入图片描述
如果是这种情况就要考虑是在做验证的时候出错啦！

每一个 if 都要对应了一个 else 并且每个条件 下 都要 callback 确保 在不同情况下 都会执行callback

所以要在验证时加上else的callback()
在这里插入图片描述

Peanutty
关注
专栏目录
Vue.js中使用v-for生成表单时，出现“this.$refs.validate is not a function“错误的解决方法
AvskBug的博客
09-29 1803
在使用v-for生成表单时，如果遇到"this.$refs.validate is not a function"错误，可以首先检查方法名是否正确，确保与实际定义的方法名称保持一致。这个错误通常是由于在表单验证过程中，引用的方法名称拼写错误导致的。例如，如果我们使用了v-for循环生成一组表单元素，并在每个元素上绑定了验证方法，那么在验证过程中需要确保方法名称是正确的。在上面的示例代码中，我们在validateForm方法中使用if语句检查是否定义了validate方法，以避免调用未定义的方法而导致错误。
关于vue.js element ui 表单验证 使用this.$refs[formName].validate()
qq_41008567的博客
04-21 1万+
实现form表单提交验证功能 model : 绑定整个表单model值 rules : 整个表单校验规则 ref ：获取该表单form组件 prop : 绑定每个表单的规则，写在el-form-item上 validate : 对整个表单进行校验的方法 valid : 每个必填表单项都提交为true,否则为false 1、简易版 表单提交 //使用element-ui 页面组件 <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label
【Vue3 + ElementUI】表单校验无效（写法：this.$refs[‘formName‘].validate((valid) =＞{} )）
weixin_47375144的博客
04-09 2207
el-form 中 校验 ，校验无效
Vue3 ref属性
最新发布
Larry的博客
09-17 670
Vue 3中的refref现在是一个函数，用于创建响应式引用。在JavaScript中访问ref的值需要通过.value属性。在模板中，Vue会自动解包ref，不需要显式地写.value。ref可以在setup函数中使用，并与reactive结合使用来构建复杂的响应式状态。这些变化是Vue 3为了提供更灵活、更高效的响应式系统而做的优化。
this.$refs[formName].validate((valid) =＞{}) 无效
qq_42309765的博客
12-21 1万+
elementUI 表单校验，在校验不通过时可以打印出值，校验通过反而不打印了 submitForm(formName) { console.log(1111); console.log("formName", formName); this.$refs[formName].validate((valid) => { if (valid) { //不打印 this.$message({ showClose
关于 this.$refs[formName].validate((valid) =>{}对整个form表单没有作用的方法
weixin_33700350的博客
11-14 1万+
好多小伙伴在使用Element中的FORM表单提交按钮整体校验时出现没有反映的情况，这里总结以下 1。首先就是在自定义校验规则的时候，if写完后没有写 callback（） callback（） callback（） 重要的事说三遍 2。打印一下this.$refs[formName]，检查是否拿到了正确的需要验证的form。查看绑定的元素是否写对 3。如果前两个都没有问题，那么就是...
form表单校验，this.$refs[name].validate(valid）返回false，解决方案
小巧r的博客
06-07 4784
1. 如果 rules 里有二次校验，校验成功需要加 callback() //比如： ruleValidate:{ deviceName: [ { required: true, message: "设备名称不能为空", trigger: "blur" } { validator: (rule, value, cb) => {
关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
热门推荐
和子昭的博客
05-28 17万+
来自”和“小编的小提示：首先打印一下this.$refs[formName]，检查是否拿到了正确的需要验证的form。其次在拿到了正确的form后，检查该form上添加的表单验证是否正确，需要注意的点有：1.使用此方法前检查prop一定必须要写在&lt;el-form-item&gt;上面，写在里面的input上或者其他任何地方都不行（el-form-item prop属性绑定）2.el-form...
vue中表单的this.$refs[formname].validate不生效
weixin_44099519的博客
08-12 7953
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Ma...
this.$refs[formName].validate((valid) =＞{} )无效
qq_41838435的博客
11-25 1044
this.$refs[formName].validate((valid) =>{} 无效 当验证通过时，点击确定按钮也没反应，原因是我在我在添加验证时没有写else的callback() 每个if都要对应一个else并且每个条件下都要callback确保在不同情况下都会执行callback ...
在vue里this.$refs[formName].validate((valid) =>是什么意思
04-19
？这是在使用 Vue.js 框架中，对表单进行验证的操作。...因此，this.$refs[formName].validate((valid) => 的意思是通过引用的表单组件名字来调用 validate 方法进行表单验证，验证结果通过回调函数 valid 返回。
Vue+TypeScript开发中TS不识别this.$refs的问题
CC酱写前端的博客
01-11 1632
Vue+TypeScript开发中TS不识别this.$refs的问题
vue-element-ui 中使用 el-form 报错 “TypeError: this.$refs[formName] is undefined“
Anicer1219的博客
04-16 3178
情况说明：使用了 element-ui 里面 <el-form></el-form> 创建了个表单，但是取数据的时候，老是报错"TypeError: this.$refs[formName] is undefined"。按照网上搜来的在 mounted() 里面添加，但是没用啊。大好江山一片红，大家看看 前奏：皇天不负有心人，观察之前，也出现过这样的 bug，比如在这个 <img />标签里面按理说可以显示图片 <img :v-image-preview="
this.$refs[formName].validate(valid => { if (!valid) { this.getverification() return } })
07-14
它使用了 `$refs` 来获取一个名为 `formName` 的组件引用，并调用了其中的 `validate` 方法。该方法接受一个回调函数 `valid => {...}`，在回调函数中进行验证操作。如果验证结果为 `false`，则会执行 `this....
element-ui 表单校验 this.$refs[formName].validate() 不执行 解决方案
Damon99999的博客
08-12 2728
1: 确保每一个prop都写在<el-form-item>标签上 eg: <el-form-item label=" " prop="checked" > 2:确保每个验证函数一定调用了callback()函数，不管通过与否都必须调用callback()回调函数！！！ 3:打印this.$refs[formName]看能不能取到，如果不行说明没有取到，重新检查一下ref是否...
vue 和element中this.$refs[form].validate(valid) 一直不执行
weixin_42718754的博客
05-25 5976
项目场景： vue中this.$refs[form].validate(valid) 一直不执行 问题描述： 在用vue和element做表单验证的时候，this.$refs[form].validate(valid) 一直不执行里面的代码，后来发现还是因为自定义的验证方法里面漏写的callback（） 原因分析： 一开始只写了1,2,4 三个callback方法， 漏写了3 的callback 方法，导致我的validate执行不成功， 如果确定你的自定义验证方法里面的callback是都
Vue-validate(valid)
m0_51989086的博客
12-28 2770
这样，在提交表单时，validate() 方法会对表单数据按照验证规则进行验证，如果有验证失败的情况，会返回 false并提示错误信息。如果所有验证规则都通过，返回true 并提交数据。1.在Vue组件中，一个名为 valid的 data 属性，它是用于存储表单验证的状态，如果 valid 值为true，则表单提交，如果valid 值为 false，则表单不可以提交。，它可以在表单提交前对表单数据进行验证，如果数据不合法，则可以组织表单提交，从而避免了不必要的错误和数据丢失。4.在表单项中定义验证规则。
执行this.$refs[formName].validate((valid) =＞{})代码没有提示用户message且rule没反应
树上骑个猴的博客
12-03 1851
1。首先就是在自定义校验规则的时候，if写完后没有写 callback（） 2。打印一下this.refs[formName]或者this.refs[formName]或者this.refs[formName]或者this.refs.formName，检查是否拿到了正确的需要验证的form。查看绑定的元素是否写对 3。如果前两个都没有问题，检查自定义的校验规则，看看有没有写错 你可以依次注释掉的一个校验规则，看看注释掉哪个，功能实现了，就说明哪个的校验规则有问题 ...
Vue进阶（幺幺叁）：element ui 表单验证 this.$refs[formName].validate()问题解决
IT全栈 华强工作室
04-21 5353
前言 在开发Vue项目过程中，应用element-ui做表单验证遇到this.$refs[formName].validate()提示validate()未定义的问题。 问题原因 要验证的DOM，还没有加载出来。 解决方法 首先打印一下this.$refs[formName]，检查是否拿到了正确的需要验证的form（有时候获取到数组，需要按下标取值）。 其次在拿到了正确的form后，检查该form...
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 : 整个表
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值