Vue表单预校验 validate方法不生效

最新推荐文章于 2024-06-18 16:26:41 发布
最新推荐文章于 2024-06-18 16:26:41 发布
阅读量1w 收藏 9
点赞数 14
分类专栏： vue Idea
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47333020/article/details/108293709
版权
vue 同时被 2 个专栏收录
10 篇文章 1 订阅
订阅专栏
Idea
8 篇文章 0 订阅
订阅专栏

在学习Vue秃头的路上,再遇一难
为了实现修改用户功能，绑定单击事件函数
在这里插入图片描述
函数里先实现表单预验证功能
在这里插入图片描述
期待表单验证正确打印一个true，错误打印一个false
先来错误的测试：
在这里插入图片描述
好的可能是意外，再来个正确的
在这里插入图片描述
.。。。好的确认是bug了，老规矩哪里有嫌疑哪里打印输出
修改方法代码为
在这里插入图片描述
再来以便错误测试
在这里插入图片描述
2不见了，再缩小一下范围，看看是不是我英文打错了（经常）
在这里插入图片描述
测试
在这里插入图片描述
好的可以结案了，valid方法没有执行
半小时后。。。。。错误出处
在这里插入图片描述
在自定义检验规则时，由于我对自定义校验规则未理解透彻
在这里插入图片描述
在Element官方文档中找到了正确用法
修改代码
在这里插入图片描述

测试
在这里插入图片描述
在这里插入图片描述

it界的哈士奇
关注
  • 14
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
Vue2.0表单校验组件vee-validate的使用详解
08-30
Vue2.0表单校验组件vee-validate的使用详解 vee-validate是一款功能强大且灵活的Vue2.0表单校验组件，提供了多种方式来校验表单数据。这篇文章将详细介绍vee-validate的使用教程，包括安装、基本使用、Validator的...
vue表单自定义校验规则介绍
10-18
总结起来，Vue中的表单自定义校验规则提供了一种灵活的方法来验证用户输入，可以根据项目需求编写各种复杂的验证逻辑。通过绑定自定义验证函数到`rules`对象，并在需要的时候触发验证，可以有效地确保表单数据的正确...
【vue】form表单提交validate验证不进valid原因
最新发布
王佑辉的博客
06-18 527
3.<el-form>中要写成:model，不能使用v-model。4.自定义的validate要各个路径均能返回callback()。1.<el-form>是否写了ref=“form”。2.是否有其它标签写了ref=“form”。
vue $refs validate校验不生效
ltf-spaceweixin_46032911的博客
08-10 2856
代码】vue $refs validate校验不生效。
vue validate验证规则不生效
u012497072的博客
12-18 830
正确写成prop就可以了
vue中表单的this.$refs[formname].validate不生效
weixin_44099519的博客
08-12 7834
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Ma...
iview表单验证不生效问题注意点
weixin_34101784的博客
03-14 1146
按照iview官网介绍写的form表单验证，但是无论填写与否都不进行校验，找了很久的原因，突然才发现一个关键的地方，一定要加props!!! https://blog.csdn.net/xuaner8786/article/details/80008925 这是网友总结的iview表单验证注意点，我在这里再补充 props一定要加这一点！否则表单验证不生效。 转载于:https://www.c...
Vue循环组件加validate多表单验证的实例
10-18
在使用Vue.js开发中，表单验证是一个不可或缺的功能，特别是在需要处理多个表单的场景下。本文将介绍如何结合Vue的循环组件和validate函数实现多表单验证。 首先，我们需要了解本文中提到的几个核心组件和概念： 1....
vue+VeeValidate 校验范围实例详解（部分校验,全部校验）
10-17
validate（)可以指定校验范围内，或者是全局的 字段。而validateAll()只能校验全局。这篇文章主要介绍了vue+VeeValidate 校验范围（部分校验，全部校验） ,需要的朋友可以参考下
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 : 整个表
Vue iview form表单验证失效
qq_45094682的博客
09-20 3077
当Form表单添加rules格式校验时，我们一般会采取默认iview form表单校验，这导致一些数字类型(number)的数据验证失效
vue+ ivew :表单验证不生效
风一样的少年
03-26 662
问题描述 表单添加了验证规则，部分规则生效了，部分规则不生效 场景1 没有声明绑定数据的类型 // 数字 数组要声明类型 xxx1:[ {reqired: true, message:'xxx类型不能为空', trigger:'blur', type: 'number'} ], xxx2:[ {required:true, message:'xxx', trigger:'blur', type: 'number'} ], xxx3:[ {required:true,
Element或ant-design-vue的form表单校验方法validate不执行问题
LJX888666的博客
05-14 8822
Element或ant-design-vue的form表单校验方法validate不执行问题 引起问题的原因是：自定义的prop校验方法里，有些条件没有callback函数返回值 element有问题的form表单示例代码如下（不完整代码）： <template> <el-form :model="formModel" :rules="rules" ref="form" > <el-form-item label="姓名" prop="name"&g
关于vue+element 表单验证未执行的问题-表单验证失败
sumimg的博客
08-31 505
2.先检查以下prop的值和model是否匹配：标签里prop参数的命名需要和标签里model数据源对象里的一致才能准确的验证。**2.有if,if里面有callback(),但是没有else!加上else即可解决这是我没有检查到的原因wwwu~*1.if/else的里面没有callback()改了三个小时的Bug呜呜呜终于找出来了。1.先分别试试form和表单验证的结果。输出表单验证结果时如下。
vue+element的表单验证不可用（:rules）
m0_48971013的博客
11-02 302
vue+element的表单验证不可用（:rules） 百度了下发现可能出现的问题 1.prop没有加： 2.验证函数没有加： 这两种我都有加上但是只有红星标识，验证还是不管用 搞得我心态炸裂，最后请教的同事发现是因为我 :model绑定的时候为两个元素绑定了同一个model 这样就导致它没办法识别出要验证的表单是哪一个： ...
vue Form validate 不执行问题
camille009的博客
08-25 2008
submitForm(formName) { this.$refs[formName].validate((valid) => { //这里怎么也执行不到？？？？？？？？？？？ if (valid) { alert('submit!'); } else { alert('error submit!!'); return false; } }); } 解决办法： var checkP
vue elementUI组件表单动态验证失效的问题与解决办法
tyjlearning的博客
03-04 1711
一、缘由 在项目中，有一个需求是需要根据条件给表单项添加验证属性prop确定是否验证表项。 二、第一次实现与遇到的问题 比如银行卡号根据输入年龄进行判断，如果大于等于18岁才需要填入银行卡号。最先的想法先设置好el-form的rules，然后通过三元表达式赋值prop属性，实现动态验证，示例如下： <template> <el-form ref="ruleForm" :model="formData" :rules="rules"> <el-form-item ...
为什么vue写好的表单校验没有生效
03-29
可能有多种原因导致Vue写好的表单校验没有生效，以下是一些可能的原因和解决方法： 1. 没有引入相关的依赖库：Vue表单校验通常需要引入一些依赖库，如VeeValidate、vee-validate、async-validator等，如果没有引入这些库，表单校验就无法生效。需要在项目中安装这些库，并在组件中引入。 2. 校验规则设置不正确：Vue表单校验需要设置一些校验规则，如required、email、min等，如果规则设置不正确，表单校验也无法生效。需要检查校验规则是否正确，并确保在组件中正确设置。 3. 校验代码放错位置：Vue表单校验代码需要放在正确的位置才能生效，如在mounted、created、beforeCreate等钩子函数中放置校验代码都会导致校验不生效。需要将校验代码放置在正确的位置，如在methods中创建一个校验函数，然后在submit事件中调用该函数。 4. 表单绑定错误：Vue表单校验需要正确地绑定表单元素，如v-model、v-bind等，如果绑定错误，表单校验也无法生效。需要检查表单元素的绑定是否正确，并确保表单元素与数据绑定正确。 5. 样式设置错误：Vue表单校验需要设置一些样式，如错误提示信息的样式、表单元素的样式等，如果样式设置错误，表单校验也无法生效。需要检查样式设置是否正确，并确保样式与组件的结构相符。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值