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.pswp.cn/web/79451.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/79451.shtml
英文地址,請注明出處:http://en.pswp.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() { …