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

【Element UI】表单及其验证规则详细

Form表单

    • Form表单验证
      • 1. 使用方法
      • 2. rule参数
      • 3. validator回调函数
        • 异步服务器验证

Form表单验证

Form组件提供了表单验证的功能,需要通过rules属性传入约定的验证规则,并将Form-Itemprop属性设置为需校验的字段名

1. 使用方法

结构:

<template><div><el-form :model="loginForm" status-icon :rules="loginRules" ref="loginForm" label-width="100px"class="demo-ruleForm"><el-form-item label="电话" prop="phone"><el-input v-model.number="loginForm.phone" placeholder="请输入电话" prefix-icon="el-icon-phone" /></el-form-item><el-form-item label="密码" prop="password"><el-input type="password" v-model="loginForm.password" placeholder="请输入密码" prefix-icon="el-icon-lock"show-password></el-input></el-form-item><el-form-item><el-button type="primary" @click="handleLogin">登录</el-button></el-form-item></el-form></div>
</template>

数据解释:

  1. v-model:表单数据绑定
  2. status-icon:(布尔属性)
    当设置为 true 时,表单字段在验证后会显示一个状态图标:
    ✅ 绿色对勾:表示验证通过
    ❌ 红色错误:表示验证失败
  3. :rules=“loginRules”:绑定loginRules验证规则
  4. ref:用来获取表单组件,手动触发验证
  5. label:表单名
  6. props: (表单验证)表单对象loginForm中的数据名
    如果验证失败,ElementUI 会 自动 在 <el-form-item> 下方显示错误信息(message),而 prop 就是找到数据对应规则的桥梁。
  7. prefix-icon:图标
  8. show-password:出现小眼睛可点击密码是否可见

逻辑:

export default {data() {const validatePhone = (rule, value, callback) => {if (!value) {return callback(new Error('电话不能为空'));} else {const regPhone = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;if (!regPhone.test(value)) {callback(new Error('请输入正确的手机号'));} else {callback();}}};return {loginForm: {phone: '',password: '',},loginRules: {phone: [{ required: true, validator: validatePhone,  message: '请输入正确手机号', trigger: 'blur' }],password: [{ required: true, massage: '输入密码', trigger: 'blur' },{ min: 6, max: 20, message: '长度在6到20个字符', trigger: 'blur' }]}}},methods: {handleLogin() {this.$refs.loginForm.validate((valid) => {if (valid) {this.loading = true;alert('登陆成功!');} else {return false;}})}}
}

loginRules中每个表单项可以包含多条校验规则{},第一条若不符合则之后的校验规则则不执行
validate()方法是组件内置的,用来对表单内容进行验证

2. rule参数

参数类型说明示例
typeString字段类型邮箱验证:{ type: 'email' }
requiredBoolean是否必填{ required: true }
messageString/Function错误提示{ message: '必填项' }
triggerString/Array触发事件{ trigger: ['blur', 'change'] }
参数说明示例
pattern正则表达式验证{ pattern: /^1\d{10}$/ }
min/max数值/长度范围{ min: 6, max: 12 }
len固定长度{ len: 11 }
enum枚举值验证{ enum: ['admin', 'user'] }
whitespace禁止纯空格{ whitespace: true }
validator自定义验证函数{validator:validatePhone}

密码强度验证:{ pattern: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}$/, message: '需包含大小写和数字' }

3. validator回调函数

validator: (rule, value, callback) => {// 验证逻辑if (/* 验证失败条件 */) {callback(new Error('错误提示信息'));} else {callback();}
}
  1. rule:Object (当前验证规则对象,包含该字段的所有验证规则信息)
  2. value:当前表单字段的值
  3. callback:验证完成后的回调函数
  • 验证成功时调用:callback();
  • 验证失败时调用:callback(new Error('错误提示信息'))
异步服务器验证
username: [{required:true,message:'请输入用户名'},{validator:(rule,value,callback)=>{checkUsernameAvaliable(value).then(available=>{if(!available){callback(new Error('用户名已存在'));}else{callback();}});},trigger:'blur'}
]

相关文章:

【Element UI】表单及其验证规则详细

Form表单 Form表单验证1. 使用方法2. rule参数3. validator回调函数异步服务器验证 Form表单验证 Form组件提供了表单验证的功能&#xff0c;需要通过rules属性传入约定的验证规则&#xff0c;并将Form-Item的prop属性设置为需校验的字段名 1. 使用方法 结构&#xff1a; &…...

使用 Python 打造一个强大的文件系统结构创建器

本文将深入分析一个基于 wxPython 的文件系统结构创建器程序&#xff0c;展示如何通过 CustomTreeCtrl 组件实现文件夹和文件的可视化管理&#xff0c;并提供添加、删除、导入、清空以及创建文件系统结构的强大功能。这个程序不仅适合开发者快速构建文件系统原型&#xff0c;还…...

面试真题 - 高并发场景下Nginx如何优化

Nginx是一款高性能的Web服务器和反向代理服务器&#xff0c;以其轻量级、高并发处理能力和稳定性闻名。在面对高并发场景时&#xff0c;合理的配置与优化策略至关重要&#xff0c;以确保服务的稳定性和响应速度。 以下是针对Nginx进行高并发优化的一些关键配置和策略&#xff…...

学习笔记:黑马程序员JavaWeb开发教程(2025.4.6)

12.4 登录校验-JWT令牌-介绍 JWT&#xff08;JSON Web Token&#xff09; 简洁是指JWT是一个简单字符串&#xff0c;自包含指的是JWT令牌&#xff0c;看似是一个随机字符串&#xff0c;但是可以根据需要&#xff0c;自定义存储内容 Header是JSON数据格式&#xff0c;原始JSO…...

机器学习——逻辑回归

一、逻辑回归概念点 逻辑回归&#xff08;Logistic Regression&#xff09;是一种广泛使用的统计分析方法和机器学习算法&#xff0c;主要用于处理二分类问题&#xff08;即因变量为二元类别&#xff0c;如0和1、是和否等&#xff09;。尽管名字中有“回归”二字&#xff0c;但…...

服务间的“握手”:OpenFeign声明式调用与客户端负载均衡

现在&#xff0c;假设我们有一个新的order-service&#xff0c;它在创建订单时需要获取用户信息。 如果order-service直接硬编码user-service的IP和端口进行调用&#xff0c;会面临以下问题&#xff1a; 缺乏弹性: 如果user-service实例的IP或端口发生变化&#xff08;在云环境…...

蓝桥杯11届国B 答疑

题目描述 有 n 位同学同时找老师答疑。每位同学都预先估计了自己答疑的时间。 老师可以安排答疑的顺序&#xff0c;同学们要依次进入老师办公室答疑。 一位同学答疑的过程如下&#xff1a; 首先进入办公室&#xff0c;编号为 i 的同学需要 si​ 毫秒的时间。然后同学问问题老…...

【单机版OCR】清华TH-OCR v9.0免费版

今天向大家介绍一款非常好用的单机版OCR图文识别软件&#xff0c;它不仅功能多&#xff0c;识别能力强&#xff0c;而且还是免费使用的。OCR软件为什么要使用单机版&#xff0c;懂得都懂&#xff0c;因为如果使用在线识别的OCR软件&#xff0c;用户需要将文档上传互联网服务器的…...

蓝牙耳机什么牌子好?倍思值得冲不?

最近总被问“蓝牙耳机什么牌子好”&#xff0c;作为踩过无数坑的资深耳机党&#xff0c;必须安利刚入手的倍思M2s Pro主动降噪蓝牙耳机&#xff01;降噪、音质、颜值全都在线&#xff0c;性价比直接拉满。 -52dB降噪&#xff0c;通勤摸鱼神器 第一次开降噪就被惊到&#xff01…...

Java卡与SSE技术融合实现企业级安全实时通讯

简介 在数字化转型浪潮中,安全与实时数据传输已成为金融、物联网等高安全性领域的核心需求。本文将深入剖析东信和平的Java卡权限分级控制技术与浪潮云基于SSE的大模型数据推送技术,探索如何将这两项创新技术进行融合,构建企业级安全实时通讯系统。通过从零到一的开发步骤,…...

使用Spring Boot和Spring Security构建安全的RESTful API

使用Spring Boot和Spring Security构建安全的RESTful API 引言 在现代Web开发中&#xff0c;安全性是构建应用程序时不可忽视的重要方面。本文将介绍如何使用Spring Boot和Spring Security框架构建一个安全的RESTful API&#xff0c;并结合JWT&#xff08;JSON Web Token&…...

Win11下轻松搭建wiki.js,Docker.desktop部署指南(mysql+elasticsearch+kibana+wiki.js)

Docker.desktop部署wiki.js指南 前言环境和要求介绍提前准备 1. elasticsearch1.1 部署容器1.2 参数说明1.3 验证容器是否部署成功 2. kibana2.1 部署容器2.2 验证是否部署成功2.3 安装IK分词器 3. MySql3.1 部署容器3.2 增加数据库和wiki.js所需要的账号 4. wiki.js4.1 部署容…...

【JavaWeb】MySQL

1 引言 1.1 为什么学&#xff1f; 在学习SpringBootWeb基础知识(IOC、DI等)时&#xff0c;在web开发中&#xff0c;为了应用程序职责单一&#xff0c;方便维护&#xff0c;一般将web应用程序分为三层&#xff0c;即&#xff1a;Controller、Service、Dao 。 之前的案例中&am…...

数据库实验报告 数据定义操作 3

实验报告&#xff08;第3次&#xff09; 实验名称 数据定义操作 实验时间 10月12日1-2节 一、实验内容 1、本次实验是用sql语句创建库和表&#xff0c;语句是固定的&#xff0c;要求熟记这些sql语句。 二、源程序及主…...

寻找树的中心(重心)

题目&#xff1a; 思路&#xff1a; “剥洋葱”&#xff1a;每次剥掉一层叶子结点&#xff0c;直到最后剩余不多于2个节点&#xff0c;这些节点就是树的中心&#xff08;重心&#xff09;。 解释&#xff1a; 1、根据图论的知识可以知道&#xff0c;一颗树的中心&#xff08…...

Oracle 高水位线(High Water Mark, HWM)

1. 高水位线&#xff08;HWM&#xff09;的定义 基本概念&#xff1a;HWM 是 Oracle 数据库中一个段&#xff08;如表、索引&#xff09;中已分配并被格式化&#xff08;Formatted&#xff09;的存储空间的最高位置。它标识了该段历史上曾达到的最大数据块使用量。 物理意义&a…...

Redis学习专题(二)事务和锁机制

目录 引言 1、事务三特性 2、事务相关指令 &#xff1a;Multi、Exec、discard 快速入门 注意&#xff1a; 3、事务冲突 解决办法&#xff1a; 1.悲观锁 2.乐观锁 3.watch & unwatch 引言 Redis 的事务是什么? 1、Redis 事务是一个单独的隔离操作&#xff1a;事…...

多平台!像素艺术的最佳选择 , 开源像素画工具

项目简介 如果你喜欢作像素风格的游戏或动画&#xff0c;那么这款Pixelorama或许是你的好帮手。它是一款免费开源的像素画编辑器&#xff0c;功能丰富&#xff0c;操作便捷&#xff0c;支持多平台使用&#xff08;Windows、macOS、Linux&#xff09;。无论你是像素新手还是老手…...

使用 Kotlin 和 Jetpack Compose 开发 Wear OS 应用的完整指南

环境配置与项目搭建 1. Gradle 依赖配置 // build.gradle (Module) android {buildFeatures {compose true}composeOptions {kotlinCompilerExtensionVersion "1.5.3"} }dependencies {def wear_compose_version "1.2.0"implementation "androidx.…...

JavaScript【5】DOM模型

1.概述&#xff1a; DOM (Document Object Model)&#xff1a;当页面被加载时&#xff0c;浏览器会创建页面的文档对象模型&#xff0c;即dom对象&#xff1b;dom对象会被结构化为对象树&#xff0c;如一个HTML文档会被分为head&#xff0c;body等部分&#xff0c;而每个部分又…...

【诊所电子处方专用软件】佳易王个体诊所门诊电子处方开单管理系统:零售药店电子处方服务系统#操作简单#诊所软件教程#药房划价

一、软件试用版资源文件下载说明 &#xff08;一&#xff09;若您想体验软件功能&#xff0c;可通过以下方式获取软件试用版资源文件&#xff1a; 访问头像主页&#xff1a;进入作者头像主页&#xff0c;找到第一篇文章&#xff0c;点击文章最后的卡片按钮&#xff0c;即可了…...

【OpenCV】帧差法、级联分类器、透视变换

一、帧差法&#xff08;移动目标识别&#xff09;&#xff1a; 好处&#xff1a;开销小&#xff0c;不怎么消耗CPU的算力&#xff0c;对硬件要求不高&#xff0c;但只适合固定摄像头 1、优点 计算效率高&#xff0c;硬件要求 响应速度快&#xff0c;实时性强 直接利用连续帧…...

OpenCV 特征检测全面解析与实战应用

在计算机视觉领域&#xff0c;特征检测是从图像中提取关键信息的核心技术&#xff0c;这些关键特征是图像匹配、目标识别、场景理解等复杂任务的基础。OpenCV 作为计算机视觉领域最受欢迎的开源库之一&#xff0c;提供了丰富且高效的特征检测算法。本文将深入介绍 OpenCV 中多种…...

AI预测3D新模型百十个定位预测+胆码预测+去和尾2025年5月17日第80弹

从今天开始&#xff0c;咱们还是暂时基于旧的模型进行预测&#xff0c;好了&#xff0c;废话不多说&#xff0c;按照老办法&#xff0c;重点8-9码定位&#xff0c;配合三胆下1或下2&#xff0c;杀1-2个和尾&#xff0c;再杀6-8个和值&#xff0c;可以做到100-300注左右。 (1)定…...

IDEA反斜杠路径不会显示JUnit运行的工作目录配置问题

1. 当在IDEA基准目录下创建junit-reflect-annotation-proxy-app\\src\\data.txt时&#xff0c;如果是Mac电脑&#xff0c;这种\\文件路径时&#xff0c;IDEA里面不会显示&#xff0c;但在Finder下会显示&#xff0c;是直接创建了文件名为junit-reflect-annotation-proxy-app\sr…...

Linux517 rsync同步 rsync借xinetd托管 配置yum源回顾

计划测试下定时服务 同步成功 是否为本地YUM源内容太少&#xff1f;考虑网络YUM源 单词拼错了 计划后面再看下 MX安装 参考 计划回顾配置YUM源 配置本地YUM源配置外网YUM源配置仓库YUM源&#xff08;不熟&#xff09; 参考 参考阿里云 配置完毕 本地yum源配置 先备份 再…...

【论文阅读】A Survey on Multimodal Large Language Models

目录 前言一、 背景与核心概念1-1、多模态大语言模型&#xff08;MLLMs&#xff09;的定义 二、MLLMs的架构设计2-1、三大核心模块2-2、架构优化趋势 三、训练策略与数据3-1、 三阶段训练流程 四、 评估方法4-1、 闭集评估&#xff08;Closed-set&#xff09;4-2、开集评估&…...

大型语言模型中的QKV与多头注意力机制解析

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…...

React Flow 节点事件处理实战:鼠标 / 键盘事件全解析(含节点交互代码示例)

本文为《React Agent&#xff1a;从零开始构建 AI 智能体》专栏系列文章。 专栏地址&#xff1a;https://blog.csdn.net/suiyingy/category_12933485.html。项目地址&#xff1a;https://gitee.com/fgai/react-agent&#xff08;含完整代码示​例与实战源&#xff09;。完整介绍…...

AIGC在电商行业的应用:革新零售体验

AIGC在电商行业的应用&#xff1a;革新零售体验 引言 人工智能生成内容&#xff08;AIGC&#xff09;正在深刻改变电商行业的格局。从个性化推荐到智能客服&#xff0c;从产品描述生成到虚拟试衣&#xff0c;AIGC技术正在为电商平台带来前所未有的创新和效率提升。本文将深入探…...

【数据结构】线性表--队列

【数据结构】线性表--队列 一.什么是队列二.队列的实现1.队列结构定义&#xff1a;2.队列初始化函数&#xff1a;3.队列销毁函数&#xff1a;4.入队列函数&#xff08;尾插&#xff09;&#xff1a;5.出队列函数&#xff08;头删&#xff09;&#xff1a;6.取队头元素&#xff…...

CSS- 4.1 浮动(Float)

本系列可作为前端学习系列的笔记&#xff0c;代码的运行环境是在HBuilder中&#xff0c;小编会将代码复制下来&#xff0c;大家复制下来就可以练习了&#xff0c;方便大家学习。 HTML系列文章 已经收录在前端专栏&#xff0c;有需要的宝宝们可以点击前端专栏查看&#xff01; 点…...

Node.js 源码架构详解

Node.js 的源码是一个庞大且复杂的项目&#xff0c;它主要由 C 和 JavaScript 构成。要完全理解每一部分需要大量的时间和精力。我会给你一个高层次的概述&#xff0c;并指出一些关键的目录和组件&#xff0c;帮助你开始探索。 Node.js 的核心架构 Node.js 的核心可以概括为以…...

OpenCV级联分类器

概念 OpenCV 级联分类器是一种基于 Haar 特征、AdaBoost 算法和级联结构的目标检测方法&#xff0c;通过多阶段筛选快速排除非目标区域&#xff0c;实现高效实时检测&#xff08;如人脸、行人等&#xff09;。 加载级联分类器 // 加载级联分类器CascadeClassifier cascade;// …...

远程主机状态监控-GPU服务器状态监控-深度学习服务器状态监控

远程主机状态监控-GPU服务器状态监控-深度学习服务器状态监控 ⭐️ 推荐文章: DockerPyCharm远程调试&环境隔离解决方案 1. 整体架构 在本监控系统中&#xff0c;我们采用了Prometheus作为核心监控解决方案&#xff0c;并结合Node Exporter和Grafana构建了一个完整的监控体…...

谈谈未来iOS越狱或巨魔是否会消失

2024年10月的预测&#xff0c;先说结论&#xff1a; 巨魔iOS17.1消失概率为99%。 因为巨魔强依赖的漏洞就是一个签名漏洞&#xff0c;攻击面有限又经过2轮修复&#xff0c;第3次出现漏洞的概率极低。而越狱的话由于系统组件和服务较多&#xff0c;所以出现漏洞概率高攻击面多&…...

【OpenGL学习】(二)OpenGL渲染简单图形

文章目录 【OpenGL学习】&#xff08;二&#xff09;OpenGL渲染简单图形OpenGL渲染图形流程顶点&#xff0c;图元和片元VAO&#xff0c;VBO &#xff0c;EBO着色器示例&#xff1a;使用OpenGL渲染三角形 【OpenGL学习】&#xff08;二&#xff09;OpenGL渲染简单图形 OpenGL渲…...

学习深度学习是否要先学习机器学习?

有小伙伴问我&#xff0c;最近做毕设要做一个神经网络的课题&#xff0c;想请教一下需不需要把机器学习也都学习一遍&#xff1f; 永远正确的回答是&#xff1a;建议先学机器学习&#xff0c;再学深度学习。 上面那句你从哪都挑不出毛病&#xff0c;毕竟机器学习是深度学习的基…...

六、绘制图片

文章目录 1.创建一个红色图片2.加载bmp图片3.加载png、jpg图片 前面的几个示例&#xff0c;我们已经展示过如果在Linux系统下使用xlib接口向窗口中绘制文本、线、矩形&#xff1b;并设置文本、线条的颜色。并利用xlib提供的接口结合事件处理机制完成了一个自绘按钮控件功能。有…...

【OpenCV】基本数据类型及常见图像模式

是什么&#xff1f;能做什么&#xff1f;解决什么问题&#xff1f;为什么用它&#xff1f; OpenCV:是一个基于开源发行的跨平台计算机视觉库&#xff0c;实现 一、应用场景&#xff1a; 目标识别&#xff1a;人脸、车辆、车牌...自动驾驶医学影像分析视频内容理解与分析&…...

C# WPF .NET Core和.NET5之后引用System.Windows.Forms的解决方案

双击项目名称打开工程文件&#xff08;.csporj&#xff09;添加“Microsoft.WindowsDesktop.App.WindowsForms”引用&#xff1b; <Project Sdk"Microsoft.NET.Sdk"><PropertyGroup><OutputType>WinExe</OutputType><TargetFramework&g…...

Mysql 8.0.32 union all 创建视图后中文模糊查询失效

记录问题,最近在使用union all聚合了三张表的数据,创建视图作为查询主表,发现字段值为中文的筛选无法生效.......... sql示例: CREATE OR REPLACE VIEW test_view AS SELECTid,name,location_address AS address,type,"1" AS data_type,COALESCE ( update_time, cr…...

PYTHON训练营DAY28

类 &#xff08;一&#xff09;题目1&#xff1a;定义圆&#xff08;Circle&#xff09;类 要求&#xff1a; 包含属性&#xff1a;半径 radius。包含方法&#xff1a; calculate_area()&#xff1a;计算圆的面积&#xff08;公式&#xff1a;πr&#xff09;。calculate_circ…...

pytorch小记(二十一):PyTorch 中的 torch.randn 全面指南

pytorch小记&#xff08;二十一&#xff09;&#xff1a;PyTorch 中的 torch.randn 全面指南 PyTorch 中的 torch.randn 全面指南一、接口定义二、参数详解三、常见使用场景四、位置参数 vs. Tuple 传参 —— 数值示例五、必须用关键字传入小结 PyTorch 中的 torch.randn 全面指…...

LeetCode 第 45 题“跳跃游戏 II”

好的&#xff0c;我来帮你解释一下 LeetCode 第 45 题“跳跃游戏 II”&#xff0c;这是一道经典的贪心算法题目。 题目描述&#xff1a; 给你一个非负整数数组 nums&#xff0c;你最初位于数组的第一个位置。数组中的每个元素代表你在该位置可以跳跃的最大长度。你的目标是使用…...

【leetcode】逐层探索:BFS求解最短路的原理与实践

前言 &#x1f31f;&#x1f31f;本期讲解关于力扣的几篇题解的详细介绍~~~ &#x1f308;感兴趣的小伙伴看一看小编主页&#xff1a;GGBondlctrl-CSDN博客 &#x1f525; 你的点赞就是小编不断更新的最大动力 &#x1f386;那么废话不…...

副业小程序YUERGS,从开发到变现

文章目录 我为什么写这个小程序网站转小程序有什么坑有什么推广渠道个人开发者如何变现简单介绍YUERGS小程序给独立开发者一点小建议 我为什么写这个小程序 关注我的粉丝应该知道&#xff0c;我在硕士阶段就已经掌握了小程序开发技能&#xff0c;并写了一个名为“约球online”…...

Vue-键盘事件

键盘事件 回车事件 回车输出Input控件输入的内容 代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><title>键盘事件</title><!-- 引入Vue --><script type"text/javascript&quo…...

区块链可投会议CCF C--IPCCC 2025 截止6.7 附录用率

Conference&#xff1a;44th IEEE -- International Performance Computing and Communications Conference CCF level&#xff1a;CCF C Categories&#xff1a;计算机网络 Year&#xff1a;2025 Conference time&#xff1a;Nov 21 – 23, 2025 Austin, Texas, USA 录用率…...

Linux `mkdir` 命令深度解析与高阶应用指南

Linux `mkdir` 命令深度解析与高阶应用指南 一、核心功能解析1. 基本作用2. 与类似工具对比二、选项系统详解1. 常用基础选项2. 高级选项组合三、高阶应用场景1. 自动化部署系统2. 安全审计合规3. 容器环境初始化4. 多用户协作体系四、特殊文件处理1. 符号链接处理2. 挂载点管理…...