Vue3表单组件el-form校验规则rules属性

Vue3表单组件el-form校验规则rules属性

  • 一、前言
    • 1.基本用法
    • 2.示例代码
    • 3.校验规则详解
    • 4.自定义校验函数示例
  • 二、总结


一、前言

在使用 Element UI (现在称为 Element Plus) 的表单组件 el-form 时,rules 属性用于定义表单项的校验规则。这些规则可以帮助你确保用户输入的数据符合预期的格式和要求。

1.基本用法

rules 是一个对象,其中每个键对应一个表单项的字段名,值是一个或多个校验规则。常见的校验规则包括必填、数据类型、最小长度、最大长度、自定义校验等。

2.示例代码

以下是一个包含多个校验规则的示例:

<template><el-form :model="formData" :rules="rules" ref="form"><el-form-item label="用户名" prop="username"><el-input v-model="formData.username"></el-input></el-form-item><el-form-item label="邮箱" prop="email"><el-input v-model="formData.email"></el-input></el-form-item><el-form-item label="密码" prop="password"><el-input type="password" v-model="formData.password"></el-input></el-form-item><el-button type="primary" @click="submitForm">提交</el-button></el-form>
</template><script>
export default {data() {return {formData: {username: '',email: '',password: ''},rules: {username: [{ required: true, message: '用户名不能为空', trigger: 'blur' },{ min: 3, max: 15, message: '用户名长度应在3到15个字符之间', trigger: 'blur' }],email: [{ required: true, message: '邮箱不能为空', trigger: 'blur' },{ type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur' }],password: [{ required: true, message: '密码不能为空', trigger: 'blur' },{ min: 6, max: 20, message: '密码长度应在6到20个字符之间', trigger: 'blur' }]}};},methods: {submitForm() {this.$refs.form.validate((valid) => {if (valid) {console.log('表单提交成功');} else {console.log('表单校验失败');return false;}});}}
};
</script>

3.校验规则详解

  • required: 表示该字段是否为必填项。
  • message: 校验失败时显示的错误提示信息。
  • trigger: 触发校验的时机,常见的值有 'blur''change'
  • type: 指定校验的数据类型,如 'string''number''email''url' 等。
  • minmax: 指定字符串长度或数值的范围,只在 type'string''number' 时有效。
  • 自定义校验函数: 可以通过 validator 属性定义一个自定义的校验函数。

4.自定义校验函数示例

有时候内置的校验规则无法满足需求,这时可以使用自定义校验函数:

rules: {password: [{ required: true, message: '密码不能为空', trigger: 'blur' },{ min: 6, max: 20, message: '密码长度应在6到20个字符之间', trigger: 'blur' },{ validator: validatePasswordStrength, trigger: 'blur' }]
}function validatePasswordStrength(rule, value, callback) {if (!/\d/.test(value)) {callback(new Error('密码必须包含至少一个数字'));} else if (!/[a-zA-Z]/.test(value)) {callback(new Error('密码必须包含至少一个字母'));} else {callback();}
}

在这个示例中,validatePasswordStrength 函数被用作自定义校验函数,确保密码至少包含一个数字和一个字母。

二、总结

通过合理配置 el-form 中的 rules 属性,可以实现复杂的表单校验逻辑,提升表单的易用性和数据的可靠性。根据具体需求选择合适的校验规则和触发时机,是实现高质量表单的关键。

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

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

相关文章

从0进入微服务需要了解的基础知识

文章目录 系统架构演化过程为什么要了解系统架构的演化过程技术发展认知技术选型与创新 演变过程单体架构分层-分布式集群微服务 分布式\集群\微服务 微服务中的核心要素-拆分原则项目拆分与复杂度微服务的拆分维度有哪些小结 微服务中的核心要素服务化进行拆分后一定是微服务&…

可通过小球进行旋转的十字光标(vtkResliceCursor)

前一段事件看到VTK的一个例子&#xff1a; 该案例是vtk.js写的&#xff0c;觉得很有意思&#xff0c;个人正好也要用到&#xff0c;于是萌生了用C修改VTK源码来实现该功能的想法。原本以为很简单&#xff0c;只需要修改一下vtkResliceCursor就可以了&#xff0c;加上小球&#…

自动生成列表,颜色随机 ,定时执行函数,10秒停止执行函数,按钮执行函数

<!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>颜色列表Color List</title><style>…

基于LangChain-Chatchat实现的RAG-本地知识库的问答应用[4]-高阶自定义模块

基于LangChain-Chatchat实现的RAG-本地知识库的问答应用[4]-高阶自定义模块 1.自定义分词器 在text_splitter文件夹下新建一个文件,文件名为您的分词器名字,比如my_splitter.py,然后在__init__.py中导入您的分词器,如下所示:from .my_splitter import MySplitter修改confi…

线程池若干问题

线程池中线程异常后&#xff0c;销毁还是复用&#xff1f; 线程池在提交任务前&#xff0c;可以提前创建线程吗&#xff1f; 线程池中线程异常后&#xff0c;销毁还是复用&#xff1f; 直接说结论&#xff0c;需要分两种情况&#xff1a; 使用execute()提交任务&#xff1a…

ZSH 配置

ZSH 配置 1. 安装 ZSH2. 安装 oh my zsh3. 安装插件3.1 autojump3.2 zsh-autosuggestions 1. 安装 ZSH sudo apt-get install zsh 完成安装后需设置当前用户使用 zsh&#xff1a; chsh -s /bin/zsh 重启后即可使用 2. 安装 oh my zsh 安装 oh my zsh 需先安装 git。 自动安装…

Neo4j图形数据库查询,Cypher语言详解

Cypher语言详解 Cypher是一种专为Neo4j图形数据库设计的声明式查询语言。它类似于SQL&#xff0c;但其设计目标是便于表达图数据库中常见的图形结构和操作。本文将详细介绍Cypher语言的基本语法、常见操作、高级功能以及使用Cypher进行图形数据分析的技巧。 1. Cypher的基本概…

gin连接redis

使用Gin框架连接Redis&#xff0c;需要先安装Redis客户端库&#xff0c;例如go-redis。然后&#xff0c;你可以创建一个Redis客户端实例&#xff0c;并在Gin路由处理函数中使用它。以下是一个简单的示例&#xff1a; 1. 首先&#xff0c;安装go-redis库&#xff1a; bash go g…

QToolButton 和 QPushButton的区别和联系

在 Qt 框架中&#xff0c;QToolButton 和 QPushButton 都是按钮控件&#xff0c;用于用户交互&#xff0c;但它们在设计目的和用法上有一些不同。以下是它们的区别和联系&#xff1a; QToolButton 主要用途&#xff1a;通常用于工具栏或其他需要简洁按钮的场景。 外观&#x…

新课程《新课程》期刊是什么级别的刊物?

新课程《新课程》期刊是什么级别的刊物&#xff1f; 《新课程》是由山西出版传媒集团主管、山西三晋报刊传媒集团主办的教育类学术期刊&#xff0c;属于省级刊物。 该期刊的国内刊号为CN14-1324/G4&#xff0c;国际刊号为ISSN1673-2162。 其主要栏目包括教育教学类、课程篇、…

国际化项目开发中关于时间的问题二

为什么没有传入指定时区情况下new Date会正确显示当地时间 Date date new Date(); log.info(date.toString()) 默认构造方法 public Date() {this(System.currentTimeMillis()); }public Date(long date) {fastTime date; } System.currentTimeMillis()是jvm通过c语言实现…

厂里教务之延迟任务精准发布文章

延迟任务精准发布文章 延迟任务概述 什么是延迟任务 定时任务&#xff1a;有固定周期的&#xff0c;有明确的触发时间 延迟队列&#xff1a;没有固定的开始时间&#xff0c;它常常是由一个事件触发的&#xff0c;而在这个事件触发之后的一段时间内触发另一个事件&#xff0c…

部署远程控制台访问服务Rttys,第三部分服务端(安装Rttys)

安装服务端Rttys之前可选先在客户端安装rtty。服务端采用GO语言实现&#xff0c;前端界面采用vue实现。 CMAKE的安装和客户端RTTY的安装请参考前两篇文章&#xff1a; Linux远程连接程序工具选型 Webssh与Rtty 部署远程控制台访问服务Rttys&#xff0c;第一部分客户端&#…

下饺子模式一触即发,爆款的诞生仿佛“开盲盒”?

千呼万唤始出来&#xff0c;国产首款3A游戏大作《黑神话&#xff1a;悟空》即将发售。 早在2020年的8月20日当天&#xff0c;《黑神话&#xff1a;悟空》就发布了13分钟的实机演示。仅两天&#xff0c;B站播放量超过1700万&#xff0c;微博话题阅读量超过2.4亿。 从立项开始算…

自动化产线设备联网,协同打造5G智慧工厂

1、需求背景 随着信息技术、物联网、人工智能等领域的飞速发展&#xff0c;智慧工厂成为制造业升级和转型的关键方向。在智慧工厂中&#xff0c;产线设备之间的实时通信和协同操作可以提高整个生产流程的自动化水平。 提升生产效率 通过稳定的网络连接&#xff0c;保证设备之…

RT-Thread简介及启动流程分析

阅读引言&#xff1a; 最近在学习RT-Thread的内部机制&#xff0c;觉得这个启动流程和一些底层原理还是挺重要的&#xff0c; 所以写下此文。 目录 1&#xff0c; RT-Thread简介 2&#xff0c;RT-Thread任务的几种状态 3&#xff0c; 学习资源推荐 4&#xff0c; 启动流程分…

MTANet: 多任务注意力网络,用于自动医学图像分割和分类| 文献速递-深度学习结合医疗影像疾病诊断与病灶分割

Title 题目 MTANet: Multi-Task Attention Network for Automatic Medical Image Segmentation and Classification MTANet: 多任务注意力网络&#xff0c;用于自动医学图像分割和分类 01 文献速递介绍 医学图像分割和分类是当前临床实践中的两个关键步骤&#xff0c;其准…

Springboot3+自动装配

导言&#xff1a;这里主要讲述springboot3以后spring.factories功能失效&#xff0c;带来的解决办法。 之前有一次希望用springboot模块拿到工具模块的配置configuration的时候&#xff0c;想通过之前的spring.factories来实现自动装配&#xff0c;但是发现一直拿不到配置&…

数据仓库与数据挖掘(期末复习)

数据仓库与数据挖掘&#xff08;期末复习&#xff09; ETL的含义Extract 、 Transformation、Load。 ODS的全称Operational Data Store。 DW全称 Data Warehourse DM全称是Data Mart 数据仓库数据抽取时所用到技术是增量、全量、定时、调度 STAGE层作用是提供业务系统数据…

因果卷积和递归神经网络

因果卷积&#xff08;causal convolution&#xff09;和递归神经网络&#xff08;RNN&#xff09;在处理序列数据时各有优劣。这里我们分析两者的工作机制和性能特点。 ### 因果卷积 1. **因果卷积的特点**&#xff1a; - **不使用未来信息**&#xff1a;因果卷积只利用当前及…