vue使用rules实现表单校验——校验用户名和密码

编写校验规则

常规校验

const rules = {username: [{ required: true, message: '请输入用户名', trigger: 'blur' },{ min: 5, max: 16, message: '长度在 516 个字符', trigger: 'blur' }],password: [{ required: true, message: '请输入密码', trigger: 'blur' },{ min: 5, max: 16, message: '长度在 516 个字符', trigger: 'blur'}]
}

自定义校验:检查两次输入的密码是否一致

//校验密码的函数
const validateConfirmPassword = (rule, value, callback) => {if (value === '') {callback(new Error('请再次输入密码'))} else if (value !== registerData.value.password) {callback(new Error('两次密码不一致'))} else {callback()}
}
//在校验规则中引用
confirmPassword: [{validator: validateConfirmPassword, trigger: 'blur'}]

在这里插入图片描述

注册表单绑定校验规则

el-form 标签使用:rules="rules"绑定校验规则,el-form-item使用prop 指定校验项
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/79451.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

宝塔服务安装使用的保姆级教程

宝塔介绍: 宝塔面板(BT Panel) 是一款 国产的服务器运维管理面板,主要用于简化 Linux/Windows 服务器的网站、数据库、FTP、防火墙等管理操作。它通过图形化界面(Web端)和命令行工具(bt 命令&a…

数字化转型-4A架构之数据架构

4A架构系列文章 数字化转型-4A架构(业务架构、应用架构、数据架构、技术架构) 数字化转型-4A架构之业务架构 数字化转型-4A架构之应用架构 数字化转型-4A架构之数据架构 数字化转型-4A架构之技术架构 数据架构 Data Architecture(DA&…

每日脚本 5.11 - 进制转换和ascii字符

前置知识 python中各个进制的开头 二进制 : 0b 八进制 : 0o 十六进制 : 0x 进制转换函数 : bin() 转为2进制 oct() 转换为八进制的函数 hex() 转换为16进制的函数 ascii码和字符之间的转换 : chr(97) 码转为字符 …

Vulnhub Lazysysadmin靶机攻击实战(一)

导语   靶机下载地址 https://download.vulnhub.com/lazysysadmin/Lazysysadmin.zip   靶机信息地址 https://www.vulnhub.com/entry/lazysysadmin-1,205/ 文章目录 信息收集扫描路径提权其他思路探索其他方式找密码总结下载安装好靶机之后启动虚拟机如下所示。 信息收集 我…

【DB2】DB2启动失败报错SQL1042C

在本地某次启动db2时报错SQL1042C,具体报错如下 [db2inst1standby ~]$ db2start 05/07/2025 16:32:53 0 0 SQL1042C An unexpected system error occurred. SQL1032N No start database manager command was issued. SQLSTATE57019在网上百度到说是需要…

Python中的re库详细用法与代码解析

目录 1. 前言 2. 正则表达式的基本概念 2.1 什么是正则表达式? 2.2 常用元字符 3. re库的适应场景 3.1 验证用户输入 3.2 从文本中提取信息 3.3 文本替换与格式化 3.4 分割复杂字符串 3.5 数据清洗与预处理 4. re库的核心功能详解 4.1 re.match()&#…

蓝桥杯2025年第十六届省赛真题-水质检测

C语言代码&#xff1a; #include <stdio.h> #include <string.h>#define MAX_LEN 1000000int main() {char a[MAX_LEN 1], b[MAX_LEN 1];// 使用 scanf 读取字符数组scanf("%s", a);scanf("%s", b);int ans 0;int pre -1;int state -1;i…

65.Three.js案例-使用 MeshNormalMaterial 和 MeshDepthMaterial 创建 3D 图形

65.Three.js案例-使用 MeshNormalMaterial 和 MeshDepthMaterial 创建 3D 图形 实现效果 在该案例中&#xff0c;Three.js 被用来创建一个包含多个 3D 对象的场景。其中包括&#xff1a; 圆环结&#xff08;TorusKnot&#xff09;立方体&#xff08;Box&#xff09;球体&…

Python学习笔记--Django的安装和简单使用(一)

一.简介 Django 是一个用于构建 Web 应用程序的高级 Python Web 框架。Django 提供了一套强大的工具和约定&#xff0c;使得开发者能够快速构建功能齐全且易于维护的网站。Django 遵守 BSD 版权&#xff0c;初次发布于 2005 年 7 月, 并于 2008 年 9 月发布了第一个正式版本 1…

《汽车噪声控制》复习重点

题型 选择 填空 分析 计算 第一章 噪声定义 不需要的声音&#xff0c;妨碍正常工作、学习、生活&#xff0c;危害身体健康的声音&#xff0c;统称为噪声 噪声污染 与大气污染、水污染并称现代社会三大公害 声波基本概念 定义 媒质质点的机械振动由近及远传播&am…

冒泡排序的原理

冒泡排序是一种简单的排序算法&#xff0c;它通过重复地遍历待排序的列表&#xff0c;比较相邻的元素并交换它们的位置来实现排序。具体原理如下&#xff1a; 冒泡排序的基本思想 冒泡排序的核心思想是通过相邻元素的比较和交换&#xff0c;将较大的元素逐步“冒泡”到列表的…

前端npm包发布流程:从准备到上线的完整指南

无论是使用第三方库还是创建和分享自己的工具&#xff0c;npm都为我们提供了一个强大而便捷的平台&#xff0c;然而很多开发者在将自己的代码发布到npm上时往往面临各种困惑和挑战&#xff0c;本篇文章将从准备工作到发布上线&#xff0c;探讨如何让npm包更易发布及避免常见的坑…

使用 CDN 在国内加载本地 PDF 文件并处理批注:PDF.js 5.x 实战指南

PDF.js 是一个强大的开源 JavaScript 库&#xff0c;用于在 Web 浏览器中渲染 PDF 文件。它由 Mozilla 开发&#xff0c;能够将 PDF 文档绘制到 HTML5 Canvas 或 SVG 上&#xff0c;无需任何本机代码或浏览器插件。对于许多需要在网页中展示 PDF 内容的应用场景来说&#xff0c…

网络化:DevOps 工程的必要基础(Networking: The Essential Foundation for DevOps Engineering)

李升伟 编译 理解网络化基础知识 你是否曾想过是什么真正让卓越的DevOps工程师与众人区别开来&#xff1f;答案是网络化。是的&#xff0c;对网络的基本理解不仅仅是有帮助的——它是绝对必要的。在当今以微服务、容器和分布式系统为主宰的互联互通世界中&#xff0c;对网络原…

C++基本知识 —— 缺省参数·函数重载·引用

C基本知识 —— 缺省参数函数重载引用 1. 缺省参数2. 函数重载3. 引用3.1 引用的基础知识3.2 引用的作用3.3 const 引用3.4 指针与引用的关系 1. 缺省参数 什么是缺省参数&#xff1f;缺省参数是声明或定义函数时为函数的参数指定一个缺省值。在调用该函数的时候&#xff0c;如…

Rust 官方文档:人话版翻译指南

鉴于大部分翻译文档都不太会说人话&#xff0c;本专栏主要内容为 rust 程序设计语言、rust 参考手册、std 库 等官方文档的中译中。

FlySecAgent:——MCP全自动AI Agent的实战利器

最近&#xff0c;出于对人工智能在网络安全领域应用潜力的浓厚兴趣&#xff0c;我利用闲暇时间进行了深入研究&#xff0c;并成功开发了一款小型轻量化的AI Agent安全客户端FlySecAgent。 什么是 FlySecAgent&#xff1f; 这是一个基于大语言模型和MCP&#xff08;Model-Contr…

实战项目5(08)

目录 任务场景一 【r1配置】 【r2配置】 【r3配置】 ​​​​​​​任务场景二 【r1配置】 【r2配置】 ​​​​​​​任务场景一 按照下图完成网络拓扑搭建和配置 任务要求&#xff1a; 通过在路由器R1、R2和R3上配置静态路由&#xff0c;实现网络中各终端PC能够正常…

基于Kubernetes的Apache Pulsar云原生架构解析与集群部署指南(下)

文章目录 k8s安装部署Pulsar集群前期准备版本要求 安装 Pulsar Helm chart管理pulsarClustersBrokersTopic k8s安装部署Pulsar集群 前期准备 版本要求 Kubernetes 集群&#xff0c;版本 1.14 或更高版本Helm v3&#xff08;3.0.2 或更高版本&#xff09;数据持久化&#xff…

C35-数组和函数开发初见

一 数组作为函数的参数 用于传递数组中的某一个元素→意义不大 数组名当做函数实际参数 示例 代码 #include <stdio.h>//封装函数PrintArr void PrintArr(int arr[3]){int i;for(i0;i<3;i){printf("%d ",arr[i]);}putchar(\n);}//主函数 int main() { …