element-plus中的表单校验
1. 简单校验:
- 1.1 在
script中给出校验规则对象,主要属性名与form对象的属性名一致 - 1.2 一个字段的校验规则可以有多个,值是一个数组,数组中的一个对象就是一条校验规则
- 1.3 主要校验规则:
1.3.1required:是否必填
1.3.2message:不符合此规则时的提示信息
1.3.3trigger:触发此条规则校验的时机,有两个值,blur或change,默认就是blur和change都会进行校验
1.3.4min:此字段的最小长度
1.3.5max:此字段的最大长度
1.3.6pattern:正则表达式
例:
const rules = reactive({username: [{required: true, message: '用户名不能为空', trigger: 'blur'},{min: 6, max: 14, message: '用户名长度为6-14位'}]
})
2. 自定义校验规则:
使用validator()方法:此方法接收三个参数validator(rule,value,callback){};
rule:表示此条规则的描述信息
value:表示表单中此字段的值
callback:回调函数,通过此函数控制是否校验通过
例:
const rules = reactive({username: [{validator(rule,value,callback){if(value[0] === '0'){// 校验不通过return callback(new Error('账号第一位不能是0'))}else{// 校验通过callback()}}}]
})
3. 表单统一校验:
如果用户什么都不输入,直接点击登录,那么每个字段的校验规则是不生效的,因为此字段还没有输入。为了避免用户在不操作表单的情况下,直接提交表单,可以在用户点击提交按钮后,对所有的字段进行校验。
通过validate()方法,对整个表单的所有内容进行一次验证:
form.validate(callback):此方法接收一个回调函数,回调函数的第一个参数是布尔类型,当所有的校验规则都通过时,此值为true,否则为false;回调函数的第二个参数是校验未通过的所有字段的数组。
- 在form表单中通过ref属性标识一下
<el-form ref="formRef"></el-form>
script部分
// 获取form表单引用
const formRef = ref();
// 当点击登录按钮时的函数:
const submit = ()=>{// 获取到真正的表单元素formRef.value.validate(valid=>{if(valid){// 表单所有元素通过验证console.log('验证通过');}else{console.log('invalidFields');console.log('验证不通过');}})
}
相关文章:
element-plus中的表单校验
1. 简单校验: 1.1 在script中给出校验规则对象,主要属性名与form对象的属性名一致1.2 一个字段的校验规则可以有多个,值是一个数组,数组中的一个对象就是一条校验规则1.3 主要校验规则: 1.3.1 required:是…...
ros小问题之roslaunch tab补不全新增的功能包
在学习Gazebo这一章节时,通过catkin_create_pkg命令创建了仿真机械臂所需的软件包,创建完成后里面的内容直接拷贝了教材配套的文件,但在roslaunch时,摁tab键补不全新加的包。 重新source catkin_ws/devel/setup.bash不起作用&…...
C#常见的.Net类型(二)
目录 一、在集合中存储多个对象理解集合的选择1.列表2.字典3.堆栈4.队列5.集 二、使用Span、索引和范围Span索引范围 处理类型和属性1.特性2.创建自定义特性3.反射 一、在集合中存储多个对象 处理集合的常见类型 类型描述List动态大小的数组,可以按索引访问Dictio…...
oracle临时表空间不释放
项目报错 nested exception is java.sql.SQLException: ORA-01652: unable to extend temp segment by 128 in tablespace TEMP 原因是临时表空间满了,临时表空间一直增长,未释放导致临时表空间使用率100%。 查询临时表空间使用率 --临时表空间利用率…...
Chapter 13 Techniques of Design-Oriented Analysis: The Feedback Theorem
Chapter 13 Techniques of Design-Oriented Analysis: The Feedback Theorem 从这一章开始讲负反馈Control系统和小信号建模. 13.2 The Feedback Theorem 首先介绍 Middlebrook’s Feedback Theorem 考虑下面负反馈系统 传输函数 Guo/ui G ( s ) u o u i G ∞ T 1 T G…...
科研学习|论文解读——美国政治经济中的权力:网络分析(JASIST, 2019)
论文原题目 Power in the U.S. political economy: A network analysis 摘要 美国政治经济的许多特征产生于大型政治和经济机构之间的互动,然而我们对它们的互动性质和这些机构之间的权力分配知之甚少。在本文中,对总部设在美国的组织的网络进行了详细的…...
常用的git命令
一、常用的git命令 1. 配置 git config --local user.name "xxx" ---仅对当前Git仓库有效。配置信息将保存在当前Git仓库的 .git/config 文件中 local优先级最高,会覆盖其他范围的相同配置 git config --global user.email "xxx" ---全局…...
【AI】用iOS的ML(机器学习)创建自己的AI App
用iOS的ML(机器学习)创建自己的AI App 目录 用iOS的ML(机器学习)创建自己的AI App机器学习如同迭代过程CoreML 的使用方法?软件要求硬件开始吧!!构建管道:设计和训练网络Keras 转 CoreML将模型集成到 Xcode 中结论推荐超级课程: Docker快速入门到精通Kubernetes入门到…...
远程调用初体验笔记
远程调用初体验笔记 微服务架构通常将系统拆分成多个独立的服务单元,每个服务单元都专注于实现特定的业务功能。当一个服务需要使用另一个服务提供的功能时,就可以通过远程调用来实现。 使用步骤 1.步骤 Spring给我们提供了一个RestTemplate工具&#…...
反无人机电子护栏:原理、算法及简单实现
随着无人机技术的快速发展,其在航拍、农业、物流等领域的应用日益广泛。然而,无人机的不规范使用也带来了安全隐患,如侵犯隐私、干扰航空秩序等。为了有效管理无人机,反无人机电子护栏技术应运而生。 目录 一、反无人机电子护栏…...
Java项目利用Redisson实现真正生产可用高并发秒杀功能 支持分布式高并发秒杀
Java中的高并发秒杀场景下我们可以使用redisson来实现高并发秒杀功能, 以下就是一个可用于生产环境的高并发秒杀示例代码: pom依赖 <!-- https://mavenlibs.com/maven/dependency/org.redisson/redisson --><dependency><groupId>org.redisson</groupId&…...
0104行列式的性质-行列式-线性代数
记 D ∣ a 11 a 12 ⋯ a 1 n a 21 a 22 ⋯ a 2 n ⋯ ⋯ ⋯ a n 1 a n 2 ⋯ a n n ∣ D\begin{vmatrix}a_{11}&a_{12}&\cdots &a_{1n}\\a_{21}&a_{22}&\cdots&a_{2n}\\\cdots&\cdots&&\cdots\\a_{n1}&a_{n2}&\cdots&a_{nn}\en…...
k8s HPA 自动伸缩机制 (配置,资源限制,)
目录 一、概念 核心概念 工作原理 HPA 的配置关键参数 关键组件 使用场景 注意事项 如何确保程序稳定和服务连续 二、metrics-server 部署 metrics-server 准备 metrics-server 镜像: 使用 Helm 安装 metrics-server: 配置 metrics-server: 安装 metrics-server: …...
vulhub中GIT-SHELL 沙盒绕过漏洞复现(CVE-2017-8386)
GIT-SHELL 沙盒绕过(CVE-2017-8386)导致任意文件读取、可能的任意命令执行漏洞。 测试环境 为了不和docker母机的ssh端口冲突,将容器的ssh端口设置成3322。本目录下我生成了一个id_rsa,这是ssh的私钥,连接的时候请指…...
SpringBoot+vue3打造企业级一体化SaaS系统
SpringBootvue3打造企业级一体化SaaS系统 简介: 全面提升前后端技术水平,独立完成全栈项目开发能力,快速进击全栈工程师,最终在面试中脱颖而出。整合后端主流技术(Spring Boot、物理数据库隔离、加载动态权限、多…...
探讨TCP的可靠性以及三次握手的奥秘
🌟 欢迎来到 我的博客! 🌈 💡 探索未知, 分享知识 !💫 本文目录 1. TCP的可靠性机制1.2可靠性的基础上,尽可能得提高效率 2. TCP三次握手过程3. 为何不是四次握手? 在互联网的复杂世界中,TCP&am…...
openai常见的两个错误:BadRequestError和OpenAIError
错误1:openai.OpenAIError: The api_key client option must be set either by passing api_key..... 在通过openai创建客户端必须要设置api key,如果你事先已经在本机的环境中设置未起效可以手动设置,注意手动设置时不要用下面的形式 import openai f…...
2核4g服务器够用吗?
2核4G服务器够用吗?够用。阿腾云以2核4G5M服务器搭建网站为例,5M带宽下载速度峰值可达640KB/秒,阿腾云以搭建网站为例,假设优化后平均大小为60KB,则5M带宽可支撑10个用户同时在1秒内打开网站,并发数为10&am…...
数据仓库数据分层详解
数据仓库中的数据分层是一种重要的数据组织方式,其目的是为了在管理数据时能够对数据有一个更加清晰的掌控。以下是数据仓库中的数据分层详解: 原始数据层(Raw Data Layer):这是数仓中最底层的层级,用于存…...
unity内存优化之AB包篇(微信小游戏)
1.搭建资源服务器使用(HFS软件(https://www.pianshen.com/article/54621708008/)) using System.Collections; using System.Collections.Generic; using UnityEngine;using System;public class Singleton<T> where T : class, new() {private static readonly Lazy<…...
论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(二)
HoST框架核心实现方法详解 - 论文深度解读(第二部分) 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章: 论文深度解读 + 算法与代码分析(二) 作者机构: 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题: 人形机器人…...
label-studio的使用教程(导入本地路径)
文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...
Mac软件卸载指南,简单易懂!
刚和Adobe分手,它却总在Library里给你写"回忆录"?卸载的Final Cut Pro像电子幽灵般阴魂不散?总是会有残留文件,别慌!这份Mac软件卸载指南,将用最硬核的方式教你"数字分手术"࿰…...
Neo4j 集群管理:原理、技术与最佳实践深度解析
Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档,本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石,用于构建高可用、可扩展且一致的图数据库服务…...
vue3 定时器-定义全局方法 vue+ts
1.创建ts文件 路径:src/utils/timer.ts 完整代码: import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...
让AI看见世界:MCP协议与服务器的工作原理
让AI看见世界:MCP协议与服务器的工作原理 MCP(Model Context Protocol)是一种创新的通信协议,旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天,MCP正成为连接AI与现实世界的重要桥梁。…...
Swagger和OpenApi的前世今生
Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章,二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑: 🔄 一、起源与初创期:Swagger的诞生(2010-2014) 核心…...
USB Over IP专用硬件的5个特点
USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中,从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备(如专用硬件设备),从而消除了直接物理连接的需要。USB over IP的…...
LOOI机器人的技术实现解析:从手势识别到边缘检测
LOOI机器人作为一款创新的AI硬件产品,通过将智能手机转变为具有情感交互能力的桌面机器人,展示了前沿AI技术与传统硬件设计的完美结合。作为AI与玩具领域的专家,我将全面解析LOOI的技术实现架构,特别是其手势识别、物体识别和环境…...
Java求职者面试指南:Spring、Spring Boot、Spring MVC与MyBatis技术解析
Java求职者面试指南:Spring、Spring Boot、Spring MVC与MyBatis技术解析 一、第一轮基础概念问题 1. Spring框架的核心容器是什么?它的作用是什么? Spring框架的核心容器是IoC(控制反转)容器。它的主要作用是管理对…...
