ElementUI中为什么使用this.$refs.form.validate验证成功却直接跳过
ElementUI中为什么使用this.$refs.form.validate验证成功却直接跳过
-
问题背景
在写一个Vue练手项目时,我使用rulse对表单中用户输入的数据进行校验,但莫名奇妙就发现:当我点击提交表单时,表单中的数据都验证成功了,但是却发现没有任何反应!经过debug发现,程序在运行到
this.$refs.form.validate((valid) =>{})
这一行时,直接就跳过了(○´・д・)ノ 直接蒙圈了😵 -
问题复现:
data() {return {rules: { // 设置表单校验规则name: [ // 姓名判断{ required: true, message: '姓名不能为空' }],age: [ // 年龄判断{ required: true, message: '年龄不能为空' },{ type: 'integer', message: '年龄不合法' },{validator(rule, value, callback) {if (!(0 < value && value < 200)) {return callback(new Error('年龄不合法'))} /* else {return callback()} */}}],sex: [// 性别判断{ required: true, message: '性别不能为空' },],birthday: [ // 出生日期判断{ required: true, message: '日期不能为空' }],address: [// 地址判断{ required: true, message: '地址不能为空' }]}}},methods: {// 新增窗口提交表单按钮submit() {debugger // 问题就出现再下一行!!!// 提交前先校验表单this.$refs.form.validate((valid) => {console.log(valid)if (valid) {// 表单校验成功,进行后续的逻辑处理// 清空表单this.$refs.form.resetFields()// 隐藏新增弹窗this.dialogVisible = false}})}}
-
问题分析
经过“上网搜索”+查看ElementUI官网最终确定了问题的罪魁祸首是
validator
!当我们在使用rules
校验表单时,并且使用了validator
后,此时我们在调用this.$refs.form.validate((valid) => {}
后,并不会直接走箭头函数中的逻辑,而是直接走validator
函数,而在走validator
时,它会先寻找该函数中的callback()
回调函数,如果没有找到该回调函数,就会直接跳过箭头函数中的逻辑
-
解决方案
查看rulse
中所有的validator
函数,然后补齐未添加上的callback()
函数
参考文章
- https://blog.csdn.net/weixin_43592750/article/details/113617251
- https://www.jianshu.com/p/b150eac5ea2e
相关文章:

ElementUI中为什么使用this.$refs.form.validate验证成功却直接跳过
ElementUI中为什么使用this.$refs.form.validate验证成功却直接跳过 问题背景 在写一个Vue练手项目时,我使用rulse对表单中用户输入的数据进行校验,但莫名奇妙就发现:当我点击提交表单时,表单中的数据都验证成功了,但是…...
全期望值定理与全方差定理
全期望值定理(law of total expectation)比较熟悉,竟然还有个全方差定理(law of total variance),关于条件期望与条件方差的,总结一下。 1. 全期望值定理 随机变量 XXX 关于另外一个随机变量 …...
股票的最大利润 AcWing (JAVA)
假设把某股票的价格按照时间先后顺序存储在数组中,请问买卖 一次 该股票可能获得的利润是多少? 例如一只股票在某些时间节点的价格为 [9,11,8,5,7,12,16,14]。 如果我们能在价格为 5 的时候买入并在价格为 16 时卖出,则能收获最大的利润 11。…...
Go 语言函数调用参数传递规则
1. 调试环境Go 版本:1.19.3Gdb 版本:12.1CPU 架构:amd64Linux 发行版:Ubuntu 22.04Linux 内核版本:5.15.0-482. 函数调用参数传递规则版本变化在 Go 中函数间进行调用时,主调(caller)…...
二分查找【零神基础精讲】
来源0x3f:https://space.bilibili.com/206214 文章目录二分查找[34. 在排序数组中查找元素的第一个和最后一个位置](https://leetcode.cn/problems/find-first-and-last-position-of-element-in-sorted-array/)[162. 寻找峰值](https://leetcode.cn/problems/find-p…...

「计算机组成原理」数据的表示和运算(上)
文章目录一、进位计数制1.1 其他进制转十进制1.2 十进制转其他进制1.3 二进制、八进制和十六进制1.3 真值和机器数二、BCD码2.1 8421码2.2 余3码2.3 2421码三、整数的表示和运算3.1 无符号整数3.1.1 无符号整数的表示3.1.2 无符号整数的运算3.2 有符号整数3.2.1 有符号整数的表…...
分层,均质,稀薄燃烧
均质燃烧: 只能使用火花点燃。 即为普通燃烧方式,燃料和空气混合形成一定浓度的可燃混合气(厂家自配),整个燃烧室内混合气的空燃比是相同的,经火花塞点燃燃烧。这种燃烧方式使燃料和空气充分混合,燃料完全燃烧,从而获得大的输出功率。为使混合…...
mybatis-plus小课堂:多表查询【案例篇】(apply 拼接 in SQL,来查询从表某个范围内的数据)
文章目录 引言I 多表查询1.1 多表查询:在mapper.xml 写语句和拼接查询条件1.2 多表关联:Java代码中书写语句和拼接查询条件1.3 案例:左外连接II mybatis-Plus 之 apply 拼接 in SQL2.1 apply源码实现2.2 apply 拼接 in SQLIII 常见问题3.1 Cause: comColumn xxx in where cl…...

HashMap原理详解
一、hashmap简介 hashmap是Java当中一种数据结构,是一个用于存储Key-Value键值对的集合,每一个键值对也叫作Entry。 二、JDK7的HashMap1、JDK7时HashMap的数据结构 1、在JDK7之前,hashmap底层采用数组链表的数据结构来存储数据 2、插入数据采…...

推荐3款远程办公软件
一款好用的远程办公软件能够大大的提高我们的办公效率,在这篇文章中,我们将为您推荐几款常见又好用的远程办公软件,以帮助您能更加高效的远程办公。电脑远程办公软件有很多,本文主要从团队沟通软件、视频会议软件、远程控制软件等…...

计算机中有符号数的表示
文章目录二进制数制十进制二进制位模式基本数据类型无符号数的编码有符号数的编码原码(Sign-Magnitude)反码(Ones Complement)补码(Twos Complement)概念导读编码格式按权展开补码加法扩展一个数字的位表示…...

MySQL(一)服务器连接 库的基本操作
目录 一、连接服务器 二、简单使用 三、校验规则 条件筛选 where 进行order排序 三、查看数据库 使用 show databases;(注意分号和最后一个s) 显示创建数据库的详情信息:使用show create database test2; 四、修改数据库 五…...

Maven怎样构建生命周期?
项目构建生命周期Maven的本质是一个项目管理工具,将项目开发和管理过程抽象成一个项目对象模型(POM)。Maven构建生命周期描述的是一次构建过程经历经历了多少个事件。对项目构建的生命周期划分为3套,其中clean负责清理工作,default负责核心工…...

真实3D地形生成器【免费在线】
Terrain3D是一个免费的在线3D地形生成器,只需指定地球上的坐标,就可以自动生成附近区域的3D地形同时叠加卫星影像,并且可以导出GLTF格式的3D地形模型。 推荐:使用 NSDT场景设计器 快速搭建 3D场景。 使用Terrain3D生成真实世界的3…...
华为OD机试 - 整数编码(Python)
整数编码 题目 实现一个整数编码方法 使得待编码的数字越小 编码后所占用的字节数越小 编码规则如下 编码时7位一组,每个字节的低 7 位用于存储待编码数字的补码字节的最高位表示后续是否还有字节,置1表示后面还有更多的字节,置0表示当前字节为最后一个字节采用小端序编码…...

【GlobalMapper精品教程】051:融合Dissolve操作详解
本节讲解globalmapper中融合Dissolve工具的使用。 文章目录 一、工具介绍1. 工具位置2. 融合工具二、案例实战1. 加载实验数据2. 根据字段分组融合案例一:根据地类名称分组,将相同的类型融合到一起。案例二:根据权属地类名称分组,将相同的类型融合到一起。一、工具介绍 1.…...

Java Excel的数据导入导出
引入依赖 <!-- EasyExcel --> <dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>2.2.7</version> </dependency><!--csv文件操作--> <dependency><groupId>n…...

OceanBase 4.0解读:兼顾高效与透明,我们对DDL的设计与思考
关于作者 谢振江,OceanBase 高级技术专家。 2015年加入 OceanBase, 从事存储引擎相关工作,目前在存储-索引与 DDL 组,负责索引,DDL 和 IO 资源调度相关工作。 回顾关系型数据库大规模应用以来的发展,从单机到分布式无…...

Qt线程池
目录1、线程池是什么?2、Qt线程池2.1、用法例程2.2、线程池对性能的提升2.3、运行算法单线程写法线程池写法1、线程池是什么? 线程池是一种线程使用模式,它管理着一组可重用的线程,可以处理分配过来的可并发执行的任务。 线程池设…...
设置table中的tbody
<!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title>设置table中的tbody</title> </head> <body> <script> // 这里有json数据,是jav…...
uniapp 对接腾讯云IM群组成员管理(增删改查)
UniApp 实战:腾讯云IM群组成员管理(增删改查) 一、前言 在社交类App开发中,群组成员管理是核心功能之一。本文将基于UniApp框架,结合腾讯云IM SDK,详细讲解如何实现群组成员的增删改查全流程。 权限校验…...

C++_核心编程_多态案例二-制作饮品
#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为:煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例,提供抽象制作饮品基类,提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...
反向工程与模型迁移:打造未来商品详情API的可持续创新体系
在电商行业蓬勃发展的当下,商品详情API作为连接电商平台与开发者、商家及用户的关键纽带,其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息(如名称、价格、库存等)的获取与展示,已难以满足市场对个性化、智能…...

BCS 2025|百度副总裁陈洋:智能体在安全领域的应用实践
6月5日,2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席,并作《智能体在安全领域的应用实践》主题演讲,分享了在智能体在安全领域的突破性实践。他指出,百度通过将安全能力…...

NLP学习路线图(二十三):长短期记忆网络(LSTM)
在自然语言处理(NLP)领域,我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感,还是实现语言的翻译,都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心,而循环神经网络(RNN) 曾被视为…...

【VLNs篇】07:NavRL—在动态环境中学习安全飞行
项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战,克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...

基于Java+MySQL实现(GUI)客户管理系统
客户资料管理系统的设计与实现 第一章 需求分析 1.1 需求总体介绍 本项目为了方便维护客户信息为了方便维护客户信息,对客户进行统一管理,可以把所有客户信息录入系统,进行维护和统计功能。可通过文件的方式保存相关录入数据,对…...

【笔记】WSL 中 Rust 安装与测试完整记录
#工作记录 WSL 中 Rust 安装与测试完整记录 1. 运行环境 系统:Ubuntu 24.04 LTS (WSL2)架构:x86_64 (GNU/Linux)Rust 版本:rustc 1.87.0 (2025-05-09)Cargo 版本:cargo 1.87.0 (2025-05-06) 2. 安装 Rust 2.1 使用 Rust 官方安…...

C# 表达式和运算符(求值顺序)
求值顺序 表达式可以由许多嵌套的子表达式构成。子表达式的求值顺序可以使表达式的最终值发生 变化。 例如,已知表达式3*52,依照子表达式的求值顺序,有两种可能的结果,如图9-3所示。 如果乘法先执行,结果是17。如果5…...
Vite中定义@软链接
在webpack中可以直接通过符号表示src路径,但是vite中默认不可以。 如何实现: vite中提供了resolve.alias:通过别名在指向一个具体的路径 在vite.config.js中 import { join } from pathexport default defineConfig({plugins: [vue()],//…...