当前位置: 首页 > news >正文

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练手项目时&#xff0c;我使用rulse对表单中用户输入的数据进行校验&#xff0c;但莫名奇妙就发现&#xff1a;当我点击提交表单时&#xff0c;表单中的数据都验证成功了&#xff0c;但是…...

全期望值定理与全方差定理

全期望值定理&#xff08;law of total expectation&#xff09;比较熟悉&#xff0c;竟然还有个全方差定理&#xff08;law of total variance&#xff09;&#xff0c;关于条件期望与条件方差的&#xff0c;总结一下。 1. 全期望值定理 随机变量 XXX 关于另外一个随机变量 …...

股票的最大利润 AcWing (JAVA)

假设把某股票的价格按照时间先后顺序存储在数组中&#xff0c;请问买卖 一次 该股票可能获得的利润是多少&#xff1f; 例如一只股票在某些时间节点的价格为 [9,11,8,5,7,12,16,14]。 如果我们能在价格为 5 的时候买入并在价格为 16 时卖出&#xff0c;则能收获最大的利润 11。…...

Go 语言函数调用参数传递规则

1. 调试环境Go 版本&#xff1a;1.19.3Gdb 版本&#xff1a;12.1CPU 架构&#xff1a;amd64Linux 发行版&#xff1a;Ubuntu 22.04Linux 内核版本&#xff1a;5.15.0-482. 函数调用参数传递规则版本变化在 Go 中函数间进行调用时&#xff0c;主调&#xff08;caller&#xff09…...

二分查找【零神基础精讲】

来源0x3f&#xff1a;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 有符号整数的表…...

分层,均质,稀薄燃烧

均质燃烧&#xff1a; 只能使用火花点燃。 即为普通燃烧方式,燃料和空气混合形成一定浓度的可燃混合气&#xff08;厂家自配&#xff09;,整个燃烧室内混合气的空燃比是相同的,经火花塞点燃燃烧。这种燃烧方式使燃料和空气充分混合,燃料完全燃烧,从而获得大的输出功率。为使混合…...

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当中一种数据结构&#xff0c;是一个用于存储Key-Value键值对的集合&#xff0c;每一个键值对也叫作Entry。 二、JDK7的HashMap1、JDK7时HashMap的数据结构 1、在JDK7之前&#xff0c;hashmap底层采用数组链表的数据结构来存储数据 2、插入数据采…...

推荐3款远程办公软件

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

计算机中有符号数的表示

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

MySQL(一)服务器连接 库的基本操作

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

Maven怎样构建生命周期?

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

真实3D地形生成器【免费在线】

Terrain3D是一个免费的在线3D地形生成器&#xff0c;只需指定地球上的坐标&#xff0c;就可以自动生成附近区域的3D地形同时叠加卫星影像&#xff0c;并且可以导出GLTF格式的3D地形模型。 推荐&#xff1a;使用 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的设计与思考

关于作者 谢振江&#xff0c;OceanBase 高级技术专家。 2015年加入 OceanBase, 从事存储引擎相关工作&#xff0c;目前在存储-索引与 DDL 组&#xff0c;负责索引&#xff0c;DDL 和 IO 资源调度相关工作。 回顾关系型数据库大规模应用以来的发展&#xff0c;从单机到分布式无…...

Qt线程池

目录1、线程池是什么&#xff1f;2、Qt线程池2.1、用法例程2.2、线程池对性能的提升2.3、运行算法单线程写法线程池写法1、线程池是什么&#xff1f; 线程池是一种线程使用模式&#xff0c;它管理着一组可重用的线程&#xff0c;可以处理分配过来的可并发执行的任务。 线程池设…...

设置table中的tbody

<!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title>设置table中的tbody</title> </head> <body> <script> // 这里有json数据&#xff0c;是jav…...

JavaSec-RCE

简介 RCE(Remote Code Execution)&#xff0c;可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景&#xff1a;Groovy代码注入 Groovy是一种基于JVM的动态语言&#xff0c;语法简洁&#xff0c;支持闭包、动态类型和Java互操作性&#xff0c…...

利用ngx_stream_return_module构建简易 TCP/UDP 响应网关

一、模块概述 ngx_stream_return_module 提供了一个极简的指令&#xff1a; return <value>;在收到客户端连接后&#xff0c;立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量&#xff08;如 $time_iso8601、$remote_addr 等&#xff09;&a…...

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする 1、前言(1)情况说明(2)工程师的信仰2、知识点(1) にする1,接续:名词+にする2,接续:疑问词+にする3,(A)は(B)にする。(2)復習:(1)复习句子(2)ために & ように(3)そう(4)にする3、…...

遍历 Map 类型集合的方法汇总

1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

Go 语言接口详解

Go 语言接口详解 核心概念 接口定义 在 Go 语言中&#xff0c;接口是一种抽象类型&#xff0c;它定义了一组方法的集合&#xff1a; // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的&#xff1a; // 矩形结构体…...

MVC 数据库

MVC 数据库 引言 在软件开发领域,Model-View-Controller(MVC)是一种流行的软件架构模式,它将应用程序分为三个核心组件:模型(Model)、视图(View)和控制器(Controller)。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系,以…...

【算法训练营Day07】字符串part1

文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接&#xff1a;344. 反转字符串 双指针法&#xff0c;两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...

TRS收益互换:跨境资本流动的金融创新工具与系统化解决方案

一、TRS收益互换的本质与业务逻辑 &#xff08;一&#xff09;概念解析 TRS&#xff08;Total Return Swap&#xff09;收益互换是一种金融衍生工具&#xff0c;指交易双方约定在未来一定期限内&#xff0c;基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...

反射获取方法和属性

Java反射获取方法 在Java中&#xff0c;反射&#xff08;Reflection&#xff09;是一种强大的机制&#xff0c;允许程序在运行时访问和操作类的内部属性和方法。通过反射&#xff0c;可以动态地创建对象、调用方法、改变属性值&#xff0c;这在很多Java框架中如Spring和Hiberna…...

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型(LLM)的广泛应用,开发者常面临多个挑战: 各大模型(OpenAI、Claude、Gemini、Ollama)接口风格不统一;缺乏一个统一平台进行模型调用与测试;本地模型 Ollama 的集成与前…...