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

vue3 element-plus表单验证

news 来源：原创 2025/9/10 11:14:47

第一准备一个表单

form.vue

<template><div><el-form><el-form-item label="姓名" prop="name"><el-input v-model="data.name" placeholder="请输入姓名"></el-input></el-form-item></el-form></div>
</template>
<script setup>
import {reactive} from "vue";const data = reactive({name:''
})</script>

第二创建路由

index.js

  {path:'/form',name:'form',component:()=>import('../views/form.vue')},

第三看看是否可以访问

第四步添加验证规则

在<el-form>标签里使用 :rules="data.rules"

在data常量中加入rules对象

rules: {name: [{ required: true, message: '请输入姓名', trigger: 'blur' },{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }]
}

当光标失去焦点时就会触发

form.vue完整代码

<template><div><el-form  :rules="data.rules" :model="data"><el-form-item label="姓名" prop="name"><el-input v-model="data.name" placeholder="请输入姓名"></el-input></el-form-item></el-form></div>
</template>
<script setup>
import {reactive,ref} from "vue";const data = reactive({name:'',rules: {name: [{ required: true, message: '请输入姓名', trigger: 'blur' },{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }]}
})</script>

相关文章：

vue3 element-plus表单验证

第一准备一个表单 form.vue <template><div><el-form><el-form-item label"姓名" prop"name"><el-input v-model"data.name" placeholder"请输入姓名"></el-input></el-form-item></e…...

编程日记 2025/9/10 11:14:47

Deepseek IP-Adapter与InstantID的区别

IP-Adapter与InstantID均为基于扩散模型的图像生成控制技术&#xff0c;但两者的算法设计目标、核心模块及应用场景存在显著差异。以下从技术架构、特征处理、条件控制等维度对比两者的差异&#xff1a; 1. 核心设计目标 IP-Adapter 由腾讯团队提出&#xff08;2023年8月&…...

编程日记 2025/9/7 15:37:21

OSI 七层模型与 TCP/IP 协议栈详解

OSI 七层模型与 TCP/IP 协议栈详解 网络协议模型是理解计算机网络和通信的基础&#xff0c;而 OSI 七层模型和 TCP/IP 协议栈是最常见的两种网络通信模型。虽然这两者有些不同&#xff0c;但它们都提供了一种分层的结构&#xff0c;帮助我们理解和设计网络通信。本文将详细介绍…...

编程日记 2025/9/9 0:26:54

synchronize 或者lock 锁常见的使用场景

在 Java 多线程编程中&#xff0c;synchronized 和 Lock&#xff08;如 ReentrantLock&#xff09;是两种常见的线程同步机制。以下是它们的核心区别和典型使用场景&#xff0c;结合代码示例说明&#xff1a; 一、synchronized 的常见场景 1. 简单的临界区保护 public class …...

编程日记 2025/9/10 17:34:31

Redis之缓存更新策略

缓存更新策略 文章目录 缓存更新策略一、策略对比二、常见的缓存更新策略三、如何选择策略四、实际应用示例五、使用 Cache-Aside TTL 的方式&#xff0c;实现缓存商铺信息详情1.引入StringRedisTemplate2.将查询商铺信息加入缓存3.更新商铺信息时移除缓存总结 六、注意事项 一…...

编程日记 2025/8/29 19:57:25

【操作系统学习篇-Linux】进程

1. 什么是进程 课本概念&#xff1a;程序的一个执行实例&#xff0c;正在执行的程序等 内核观点&#xff1a;担当分配系统资源&#xff08;CPU时间&#xff0c;内存&#xff09;的实体。 如果你就看这个来理解进程&#xff0c;那么恭喜你&#xff0c;作为初学者&#xff0c;你…...

编程日记 2025/9/6 18:07:57

Docker 前瞻

一、namespace 指令 1.1 dd 命令 dd 命令用于读取、转换并输出数据。 dd 命令可从标准输入或文件中读取数据&#xff0c;根据指定的格式来转换数据&#xff0c;再输出到文件、设备或标准输出。 语法 dd option if 文件名&#xff1a;输入文件名&#xff0c;默认为标准输入…...

编程日记 2025/9/10 18:02:43

【maxENT】最大熵模型（Maximum Entropy Model）R语言实现

文章目录 一、相关package介绍1.1 dismo 包1.2 raster包1.3 常见问题与解决 二、代码示例 &#x1f7e2;&#x1f7e0;先看&#xff1a;【maxENT】最大熵模型&#xff08;Maximum Entropy Model&#xff09;介绍与使用&#xff08;maxENT软件&#xff09; ASCII文件太大&#…...

编程日记 2025/9/9 6:18:44

高负载WEB服务器--Tomcat

高负载WEB服务器–Tomcat Tomcat介绍 Tomcat 是一个开源的轻量级应用服务器&#xff0c;在 Java Web 应用开发中被广泛使用。 发展历程&#xff1a;Tomcat 最初由 Sun Microsystems 开发&#xff0c;后来成为 Apache 软件基金会的一个项目。它的发展与 Java 技术的发展密切相…...

编程日记 2025/8/28 12:38:00

分页查询列表每页1000条的优化

项目中有一个客户列表,要求每页显示1000条,并且字段很多,接口返回大概要10秒钟,进行优化. 原本逻辑:使用mybatisplus构建查询条件,分页查询客户表,查出数据库DO对象,然后for循环转化成回显的VO对象.在转化的过程中出现了查库代码,导致当每页条数1000时,每一个客户转化都需要查询…...

编程日记 2025/9/5 15:10:26

深入浅出一下Python面向对象编程的核心概念与实践应用

本篇技术博文摘要 &#x1f31f; 本文系统讲解了Python面向对象编程的核心概念与实践应用。通过电商系统用户订单模拟、动态权限账户系统等案例&#xff0c;深入剖析了类与对象、属性方法、实例方法等基础要素。重点解析了__init__构造方法、__str__对象描述、__lt__比较运算符…...

编程日记 2025/9/9 17:52:10

2025阿里云AI 应用-AI Agent 开发新范式-MCP最佳实践-78页.pptx

2025阿里云AI 应用-AI Agent 开发新范式-MCP最佳实践&#xff0c;包含以下内容&#xff1a; 1、AI 应用架构新范式 2、云原生API网关介绍 3、云原生API网关底座核心优势 4、流量网关最佳实践 5、AI 网关代理 LLM 最佳实践 6、MCP网关最佳实践 7、MSE Nacos MCP Server 注册中心…...

编程日记 2025/9/5 13:00:43

github进阶使用教程

目录索引 一、基本内容 repository fork star codespaces issue 在一个仓库创建话题讨论&#xff0c;可以由仓库主人选择开始和结束话题的讨论 pull request&#xff08;也称 pr&#xff09; 协同其他仓库开发&#xff0c;请求仓库主人拉取自己的代码合并到仓库的主分支&…...

编程日记 2025/9/9 10:11:44

【C++】 —— 笔试刷题day_16

刷题_day16&#xff0c;继续加油啊 一、字符串替换 题目解析 这道题是一道简单的字符题目&#xff0c;题目给我们一个字符串A&#xff0c;和n表示A字符串的长度&#xff0c;再给出一个字符数组arg&#xff0c;m表示arg中是数据个数。 然我们在字符串A中找到%s然后替换成arg中的…...

编程日记 2025/9/4 19:29:35

5.3 GitHub订阅系统核心架构解密：高并发设计与SQLite优化实战

GitHub Sentinel 分析报告功能实现：订阅管理核心逻辑解析 关键词：GitHub API 订阅管理, SQLite 数据库设计, RESTful API 开发, 原子操作封装, 异常处理机制 1. 订阅管理功能架构设计 订阅管理模块采用分层架构设计，通过清晰的接口隔离实现高内聚低耦合： #mermaid-svg-bW…...

编程日记 2025/8/21 3:49:15

P5738 【深基7.例4】歌唱比赛

P5738 【深基7.例4】歌唱比赛 题目描述 n ( n ≤ 100 ) n(n\le 100) n(n≤100) 名同学参加歌唱比赛，并接受 m ( m ≤ 20 ) m(m\le 20) m(m≤20) 名评委的评分，评分范围是 0 0 0 到 10 10 10 分。这名同学的得分就是这些评委给分中去掉一个最高分，去掉一个最低分，剩下 …...

编程日记 2025/9/7 4:53:24

从三次方程到复平面：复数概念的奇妙演进（三）

注&#xff1a;本文为 “复数 | 历史 / 演进” 相关文章。 因 csdn 篇幅限制分篇连载&#xff0c;此为第三篇。 生料&#xff0c;不同的文章不同的点。 机翻&#xff0c;未校。 Complex Numbers History: Complex numbers were first introduced by G. Cardano (1501-1576)…...

编程日记 2025/9/10 7:18:17

2025年七星棋牌跨平台完整源码解析（200+地方子游戏+APP+H5+小程序支持，附服务器镜像导入思路）

目前市面上成熟的棋牌游戏源码很多&#xff0c;但能做到平台全覆盖、地方玩法丰富、交付方式标准化的系统却不多。今天这套七星棋牌2023完整源码具备安卓/iOS/H5/微信小程序端四端互通能力&#xff0c;附带200多款地方子游戏&#xff0c;还配备了后台管理与自动热更系统&#x…...

编程日记 2025/9/10 18:05:30

从三次方程到复平面：复数概念的奇妙演进（四）

注&#xff1a;本文为 “复数 | 历史 / 演进” 相关文章合辑。 因 csdn 篇幅限制分篇连载&#xff0c;此为第四篇。 生料&#xff0c;不同的文章不同的点。 机翻&#xff0c;未校。 Complex number and its discovery history 复数及其发现历史 Wenhao Chen, †, Dazheng …...

编程日记 2025/9/10 18:02:41

UE5角色状态机中跳跃落地移动衔接问题

UE5系列文章目录 文章目录 UE5系列文章目录前言一、状态机设置二、主要蓝图 前言 先说说遇到的问题&#xff0c;在我按空格键跳跃落地以后&#xff0c;角色落地再按WSAD键移动就出现了画面中角色抽搐的情况 一、状态机设置 在Unreal Engine 5中创建角色时&#xff0c;处理跳…...

编程日记 2025/9/10 7:57:51

25软考中级*高项网课+历年真题+笔记+电子书+刷题【计算机软考】

两个月逆袭25年软考程序员&#xff1f;这份高效备考指南请收好 25软考中级*高项网课download &#x1f4c2; 软考中级科目备考资料介绍 ✅ 【01】2025 年软件测评师 聚焦软件测试全流程&#xff0c;涵盖 需求分析、测试设计、用例编写、缺陷管理 等核心技能。 &#x1f4d8; 备…...

编程日记 2025/9/10 18:06:11

C++STL——容器-list(含模拟实现，即底层原理)(含迭代器失效问题)(所有你不理解的问题，这里都有解答，最详细）

目录 1.迭代器的分类 2.list的使用 2.1 list的构造 2.2 list iterator 2.3 list capacity 2.4 list element access ​编辑 2.5 list modifiers ​编辑2.5.1 list插入和删除 2.5.2 insert /erase 2.5.3 resize/swap/clear ​编辑 2.6 list的一些其他接口…...

编程日记 2025/9/10 1:04:50

Linux系统编程之虚拟内存

概述 计算机内存是临时存储数据的地方&#xff0c;它比硬盘快得多&#xff0c;但容量有限。现代操作系统通过虚拟内存技术&#xff0c;使得每个进程都感觉自己独占整个地址空间&#xff0c;这不仅提高了安全性&#xff0c;也简化了内存管理。 物理内存&#xff1a;实际安装在计…...

编程日记 2025/9/4 9:53:33

笔试专题（八）

文章目录 平方数&#xff08;数学&#xff09;题解代码 DNA序列&#xff08;固定长度的滑动窗口&#xff09;题解代码 压缩字符串 &#xff08;双指针 模拟&#xff09;题解代码 chika和蜜柑 &#xff08;top k问题 排序 pair&#xff09;题解代码 平方数&#xff08;数学&a…...

编程日记 2025/9/4 9:05:02

Linux：基础IO---软硬链接动静态库前置知识

序&#xff1a;上一个章节&#xff0c;我从硬件出发&#xff0c;由宏观到微观&#xff0c;由具体到抽象&#xff0c;围绕研究对象未被打开的文件来讲解&#xff0c;操作系统是如何对一个大块的磁盘进行管理的&#xff0c;从而引进inode的概念&#xff0c;加深了对文件的理解&am…...

编程日记 2025/9/10 1:04:52

Arm CPU安全通告：基于TrustZone的Cortex-M系统面临多重故障注入攻击

安全之安全(security)博客目录导读 目录 一、概述 二、致谢 三、参考文献​​​​​​Black Hat USA 2022 | Briefings Schedule 四、版本历史 一、概述 Arm注意到BlackHat 2022大会官网发布的演讲摘要《糟糕..&#xff01;我又一次故障注入成功了&#xff01;——如何突…...

编程日记 2025/9/10 18:02:43

测试第二课-------自动化测试

作者前言 &#x1f382; ✨✨✨✨✨✨&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f382; ​&#x1f382; 作者介绍&#xff1a; &#x1f382;&#x1f382; &#x1f382; &#x1f389;&#x1f389;&#x1f389…...

编程日记 2025/9/5 19:55:33

深入探索Linux开发工具：Vim与Yum

目录 引言 Vim&#xff1a;强大的文本编辑利器 Vim的基本概念 Vim的基本操作 Vim正常模式命令集 Vim末行模式命令集 Vim的配置 使用插件拓展Vim功能 Yum&#xff1a;便捷的Linux软件包管理器 注意事项 结语 引言 在Linux的世界里&#xff0c;高效的开发工具是提升生…...

编程日记 2025/9/10 18:06:11

玩转ChatGPT：使用深入研究功能梳理思路

一、写在前面 前我尝试用ChatGPT的Deep Research&#xff08;深入研究&#xff09;功能来梳理文献&#xff0c;效果相当不错。最近&#xff0c;谷歌的Gemini 2.5 Pro也推出了类似功能&#xff0c;从网络测评来看&#xff0c;其表现与ChatGPT不相上下&#xff0c;而且还可以免费…...

编程日记 2025/9/9 18:42:25

UE5蓝图实现打开和关闭界面、退出

Button_Back 和Button_Exit是创建的两个按钮事件。 1.Create Widget 创建界面&#xff08;打开界面&#xff09; 2.Add to Viewport 添加到视图 3.remove form Parent&#xff0c;Target&#xff1a;self 从父节点移除当前界面&#xff08;关闭界面&#xff09; 4.Quit Game 退…...

编程日记 2025/9/7 13:24:05

实现vlan间的通信

这是第一种方法&#xff08;更推荐第三种&#xff09; PC1划分为vlan10&#xff0c;PC2划分为vlan20&#xff0c;实现PC1和PC2之间通信很简单&#xff0c;我们只需将网关都设置好&#xff0c;将交换机的0/0/1、0/0/3设置成vlan10&#xff0c;0/0/2、0/0/4设置成vlan20&#xf…...

编程日记 2025/9/9 0:45:42

Linux上位机开发实践（opencv算法硬件加速）

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 图像处理里面&#xff0c;opencv基本是一个标准模块。但是由于图像处理的特点&#xff0c;如果所有的算法都是cpu来做的话&#xff0c;效率会很低。…...

编程日记 2025/9/9 3:13:41

智慧社区数据可视化中枢平台——Axure全场景交互式大屏解决方案

在数字化治理的时代浪潮中&#xff0c;社区管理正面临数据碎片化、响应滞后、决策盲区等核心挑战。如何将分散的安防、环境、能源、民生服务等数据整合为可操作的智慧洞察&#xff1f;如何让冰冷的数字转化为社区管理者手中的决策利器&#xff1f;Axure智慧社区可视化大屏原型模…...

编程日记 2025/9/10 18:06:10

动态路由， RIP路由协议，RIPv1，RIPv2

动态路由 1、回顾 路由&#xff1a;从源主机到目标主机的过程 源主机发送数据给目标主机&#xff0c;源主机会查看自身的路由信息 如果目标主机是自己同网段&#xff0c;源主机查看的是直连路由 如果目标主机和自己不同网段&#xff0c;源主机查看的是静态路由、动态路由、默…...

编程日记 2025/9/10 18:05:30

C++：STL的常用容器（string/vector/deque/stack/queue/list/set/multiset/map/multimap）

程序员Amin &#x1f648;作者简介&#xff1a;练习时长两年半&#xff0c;全栈up主 &#x1f649;个人主页&#xff1a;程序员Amin &#x1f64a; P   S : 点赞是免费的&#xff0c;却可以让写博客的作者开心好久好久&#x1f60e; &#x1f4da;系列专栏&#xff1a;Java全…...

编程日记 2025/9/10 18:04:02

【unity游戏开发入门到精通——UGUI】Canvas画布组件

注意&#xff1a;考虑到UGUI的内容比较多&#xff0c;我将UGUI的内容分开&#xff0c;并全部整合放在【unity游戏开发——UGUI】专栏里&#xff0c;感兴趣的小伙伴可以前往逐一查看学习。 文章目录 一、Canvas画布组件1、Canvas组件用来干啥2、场景中可以有多个Canvas对象 二、…...

编程日记 2025/9/6 19:24:22

MyBatis 中 Mapper 传递参数的多种方法

# MyBatis Mapper 传递参数的多种方法及其优势 在使用 MyBatis 进行数据库操作时&#xff0c;Mapper 接口的参数传递是一个非常基础但又十分重要的部分。不同的参数传递方式适用于不同的场景&#xff0c;合理选择可以大大提高代码的可读性和维护性。本文将详细介绍几种常见的 …...

编程日记 2025/9/10 18:05:29

学习海康VisionMaster之平行线计算

一&#xff1a;进一步学习了 今天学习下VisionMaster中的平行线计算&#xff0c;这个是拟合直线的扩展应用&#xff0c;针对需要计算平行线的应用场合&#xff0c;可以方便的生成对应的另外一条平行线 二&#xff1a;开始学习 1&#xff1a;什么是平行线计算&#xff1f; 如果…...

编程日记 2025/9/7 16:03:22

MyBatis Mapper 传递参数的多种方法

1. 使用顺序传参法（不推荐） 方法描述 直接通过位置来引用参数，例如 （ arg0 arg1 … ） 或者 （param1, param2…）。 示例代码 List<User> selectUsers(String name, Integer age); <...

编程日记 2025/8/18 1:09:04

探索 Vue 3 响应式系统：原理与实践

Vue 3 响应式系统凭借 Proxy 的优势&#xff0c;提供更强大、灵活的响应式方案。理解其原理与 API&#xff0c;能写出更高效、可维护的 Vue 应用。不断探索其细节&#xff0c;是进阶 Vue 开发的关键。 探索 Vue 3 响应式系统&#xff1a;原理与实践 Vue 3 的响应式系统是其核…...

编程日记 2025/9/8 0:49:17

【LeetCode 热题100】二叉树构造题精讲：前序 + 中序建树 有序数组构造 BST（力扣105 / 108）（Go语言版）

&#x1f331; 二叉树构造题精讲&#xff1a;前序 中序建树 & 有序数组构造 BST 本文围绕二叉树的两类构造类题目展开解析&#xff1a; 从前序与中序遍历序列构造二叉树 将有序数组转换为二叉搜索树 我们将从「已知遍历构造树」和「平衡构造 BST」两个角度&#xff0c;拆…...

编程日记 2025/9/10 17:40:21

开源语音文本自动对齐模型：Llama-OuteTTS-1.0-1B

OuteTTS 1.0 介绍与使用指南 1. 重要采样考虑 重复惩罚机制&#xff1a;OuteTTS 1.0 要求对最近的64个token应用重复惩罚&#xff0c;而不是对整个上下文窗口。对整个上下文窗口进行惩罚会导致输出质量下降。推荐工具&#xff1a;llama.cpp 和 EXL2 提供了可靠的输出质量&…...

编程日记 2025/9/7 15:21:53

基于SpringBoot的电影订票系统(源码+数据库+万字文档+ppt)

504基于SpringBoot的电影订票系统&#xff0c;系统包含两种角色&#xff1a;管理员、用户主要功能如下。 【用户功能】 首页&#xff1a;浏览系统电影动态。 资讯信息&#xff1a;获取有关电影行业的新闻和资讯。 电影信息&#xff1a;查看电影的详细信息和排片情况。 公告信…...

编程日记 2025/9/4 11:32:30

基于SpringBoot汽车零件商城系统设计和实现(源码+文档+部署讲解）

技术范围&#xff1a;SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容&#xff1a;免费功能设计、开题报告、任务书、中期检查PPT、系统功能实现、代码编写、论文编写和辅导、论文…...

编程日记 2025/9/8 8:57:23

Python数据可视化：从脚本到海报级图表

Python数据可视化：从脚本到海报级图表 引言 在数据分析和科学计算领域，Python 是一种强大且灵活的工具。本文将带您了解如何使用 Python 进行数据可视化，从简单的脚本到生成高质量的海报级图表。我们将重点介绍如何使用 Matplotlib 库来创建、保存和优化图表，以便在各种场…...

编程日记 2025/9/8 4:11:48

使用Java截取MP4文件图片的技术指南

在多媒体处理中&#xff0c;从视频文件中截取图片是一个常见的需求。本文将详细介绍如何使用Java结合FFmpeg实现从MP4文件中截取图片的功能。我们将通过几种不同的方法来实现这一目标&#xff0c;包括直接调用FFmpeg命令行工具、使用JavaCV库以及使用JAVE库。 环境准备 在开始…...

编程日记 2025/9/9 1:30:17

C++（初阶）（十一）——list

十一&#xff0c;list 带头循环双向链表。 遍历方式&#xff1a;迭代器&#xff0c;不再支持operate[]&#xff0c;operate[]适用于底层是数组的结构。 remove删除值&#xff0c;如果有多个相同的值&#xff0c;都会删除。 接口介绍 下面会介绍list的一些接口 构造 构造…...

编程日记 2025/9/10 7:03:42

leetcode 139. Word Break

这道题用动态规划解决。 class Solution { public:bool wordBreak(string s, vector<string>& wordDict) {unordered_set<string> wordSet;for(string& word:wordDict){wordSet.insert(word);}int s_len s.size();//s的下标从1开始起算&#xff0c;dp[j]…...

编程日记 2025/9/7 0:07:37

5.1、深度剖析 docker run 命令：原理阐释与数据持久化实践探究

5.1、深度剖析 docker run 命令：原理阐释与数据持久化实践探究 1、更换国内yum源2、更换国内docker源3、卸载旧版docker4、docker安装5、镜像加速器6、镜像下载7、docker run命令交互式启动-it非交互式后台运行其他参数8、持久化存储目录挂载数据卷挂载数据同步1、更换国内yum…...

编程日记 2025/9/3 9:50:52

【AI大模型】大模型RAG技术Langchain4j 核心组件深入详解

目录 一、前言 二、Langchain4j概述 2.1 Langchain4j 是什么 2.2 Langchain4j 主要特点 2.3 Langchain4j 核心组件 2.4 Langchain4j 核心优势 三、Langchanin4j组件应用实战 3.1 前置准备 3.1.1 导入如下依赖 3.1.2 获取apikey 3.1.3 获取官方文档 3.2 聊天组件 3.…...

编程日记 2025/9/5 14:46:16