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

表单自定义规则的校验

在 Vue 3 中使用 Element Plus 的表单组件进行自定义规则的校验非常方便。Element Plus 提供了 ElFormElFormItem 组件,它们内置了表单验证的功能。下面我将详细介绍如何使用 Element Plus 进行自定义规则的校验。

创建表单及规则

首先,你需要创建一个 ElForm 组件,并为其提供一个 model rules 对象。然后在每个 ElFormItem 中绑定 prop 属性,该属性应该对应于 model 中的字段。

示例代码

<template><el-form :model="form" :rules="rules" ref="formRef" label-width="80px"><el-form-item label="用户名" prop="username"><el-input v-model="form.username"></el-input></el-form-item><el-form-item label="密码" prop="password"><el-input v-model="form.password" type="password"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm">提交</el-button></el-form-item></el-form>
</template><script setup>
import { ref } from 'vue';const formRef = ref(null);
const form = ref({username: '',password: ''
});const rules = ref({username: [{ required: true, message: '请输入用户名', trigger: 'blur' },{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }],password: [{ required: true, message: '请输入密码', trigger: 'blur' },{ min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' },{ validator: validatePassword, trigger: 'blur' }]
});function validatePassword(rule, value, callback) {if (value === '') {callback(new Error('请输入密码'));} else {if (form.value.username === value) {callback(new Error('密码不能与用户名相同'));} else {callback();}}
}function submitForm() {formRef.value.validate((valid) => {if (valid) {alert('提交成功!');} else {console.log('验证失败');return false;}});
}
</script>

说明

  1. 定义表单模型form 是一个响应式对象,用于存储表单数据。
  2. 定义验证规则rules 对象定义了表单验证规则。
    • required: 是否必填。
    • min 和 max: 字符串长度的最小和最大值。
    • trigger: 触发验证的事件,例如 blur 表示失去焦点时触发验证,change是change:改变触发。
    • validator: 自定义验证函数。
  3. 自定义验证函数validatePassword 函数用于验证密码是否与用户名相同。
  4. 提交表单submitForm 函数调用 formRef.value.validate 方法来触发表单验证。如果所有验证都通过,则提交表单。

注意事项

  • 确保在 ElForm 上使用 ref 属性,以便可以通过引用访问表单实例。
  • 自定义验证函数的第一个参数 rule 是当前验证规则的信息,第二个参数 value 是表单字段的值,第三个参数 callback 是回调函数,用于报告验证结果。

相关文章:

表单自定义规则的校验

在 Vue 3 中使用 Element Plus 的表单组件进行自定义规则的校验非常方便。Element Plus 提供了 ElForm 和 ElFormItem 组件&#xff0c;它们内置了表单验证的功能。下面我将详细介绍如何使用 Element Plus 进行自定义规则的校验。 创建表单及规则 首先&#xff0c;你需要创建…...

JVM 有哪些垃圾回收算法(回收机制)?

JVM 有哪些垃圾回收算法&#xff08;回收机制&#xff09;&#xff1f; 标记-清除算法 在Java虚拟机中&#xff0c;标记-清除算法是一种用于垃圾回收的算法。它分为两个阶段&#xff1a;标记阶段和清除阶段。 在标记阶段&#xff0c;垃圾收集器会遍历堆内存中的所有对象&…...

2024年高教社杯数学建模国赛A题思路解析+代码+论文

2024年高教社杯全国大学生数学建模竞赛&#xff08;以下简称国赛&#xff09;将于9月5日晚6时正式开始。 下文包含&#xff1a;2024国赛思路解析​、国赛参赛时间及规则信息说明、好用的数模技巧及如何备战数学建模竞赛 C君将会第一时间发布选题建议、所有题目的思路解析、相…...

Linux中yum、vim、gcc/g++的使用

目录 一、Linux 软件包管理器 yum 什么是软件包 关于 rzsz 查看软件包★ 如何安装软件★ 如何卸载软件★ Linux 开发工具 二、Linux编译器-vim使用 vim的基本概念 vim的基本操作 vim正常模式命令集 vim末行模式命令集 vim操作总结 如果在vim界面不小心按了Ctrl …...

基于模糊神经网络的金融序列预测算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 5.完整程序 1.程序功能描述 基于模糊神经网络的金融序列预测算法matlab仿真,根据序列的MAD,RSI,KD等指标实现序列的预测和最终收益分析。 2.测试软件版本以及运行结果展示 MATLAB2022A版本…...

STM32 HAL库常用功能封装

关中断 /*** brief 关闭所有中断(但是不包括fault和NMI中断)* param 无* retval 无*/ void sys_intx_disable(void) {__ASM volatile("cpsid i"); }开中断 /*** brief 开启所有中断* param 无* retval 无*/ void sys_intx_enabl…...

golang zap日志库 打印日志时显示的源文件始终是同一个问题解决方法 zap.Option函数可选项 zap.AddCallerSkip(1) 使用示例

这种情况一般出现在我们对zap日志库进行二次封装的情况下&#xff0c; 在打印日志的时候的源文件非我们期望的文件&#xff0c;如下 原因分析 出现这个问题的原因是zap函数内部在调用 runtime.Caller 时的skip层级不对了&#xff0c;因为我们进行了二次封装&#xff0c;所以za…...

BL196MQTT远程IO模块助力智能楼宇自动化升级

在智能楼宇自动化领域&#xff0c;每一个细节的优化都能带来整体效率与舒适度的显著提升。钡铼技术的BL196MQTT远程IO模块&#xff0c;以其卓越的灵活性和强大的性能&#xff0c;正在成为这一领域中推动楼宇自动化升级的关键力量。 钡铼技术IOy系列&#xff1a;创新与灵活性的…...

【面试宝典】Java面向对象面试题总结(上)

一、重写和重载 在Java中&#xff0c;重写&#xff08;Override&#xff09;和重载&#xff08;Overload&#xff09;是面向对象编程中两个非常重要的概念&#xff0c;它们都与方法的定义和调用有关&#xff0c;但两者有着本质的区别。 1、重写&#xff08;Override&#xff…...

如何运用独特的产业运营体系打造一流的数字媒体产业园

如何运用独特的产业运营体系打造一流的数字媒体产业园 2024-08-15 17:37树莓集团 在数字经济蓬勃发展的今天&#xff0c;数字媒体产业作为其中的重要一环&#xff0c;正展现出巨大的潜力和活力。而如何运用独特的产业运营体系&#xff0c;打造一流的数字媒体产业园&#xff0…...

安全基础学习-SHA-256

SHA-256 是一种密码学哈希函数,是 SHA-2(Secure Hash Algorithm 2)家族的一部分。它被广泛用于数据完整性验证、数字签名以及密码存储等领域。 1、SHA-256的原理 SHA-256 生成一个固定长度为 256 位(32 字节)的哈希值。无论输入数据的大小或类型,输出的哈希值始终是 25…...

Redis中Big Key该如何解决?

目录 1、Big Key的产生 2、BigKey场景分析 3、Big Key的危害 4、检测 BigKey 5、解决 BigKey 问题 Big Key拆分 &#xff08;1&#xff09;按时间/业务拆分 &#xff08;2&#xff09;按哈希&#xff08;Hash&#xff09;拆分 &#xff08;3&#xff09;按前缀树拆分…...

基于springboot的实习管理系统

TOC springboot207基于springboot的实习管理系统 绪论 1.1研究背景与意义 信息化管理模式是将行业中的工作流程由人工服务&#xff0c;逐渐转换为使用计算机技术的信息化管理服务。这种管理模式发展迅速&#xff0c;使用起来非常简单容易&#xff0c;用户甚至不用掌握相关的…...

土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测

土地利用/土地覆盖数据是生态、环境和气象等领域众多模型的重要输入参数之一。基于遥感影像解译&#xff0c;可获取历史或当前任何一个区域的土地利用/土地覆盖数据&#xff0c;用于评估区域的生态环境变化、评价重大生态工程建设成效等。借助CLUE模型&#xff0c;实现对未来土…...

Rust 之环境搭建

前言 Rust 是一种现代的系统级编程语言&#xff0c;以其内存安全性、高性能和简洁的语法而著称。本文将介绍如何在不同操作系统上搭建 Rust 开发环境&#xff0c;并配置好基础工具&#xff0c;使您能够快速开始 Rust 编程。 1. 安装 Rust Rust 官方推荐使用 rustup 工具来管…...

基于微信小程序地图实现点位标注、覆盖物、地图聊天

目录 小程序部分map标签的使用获取用户经纬度并转换地址地图点击事件覆盖物标注点击并实现弹窗交互数据库及接口部分数据库表结构设计API搭建小程序接口使用注意事项wx.getLocation深入控制地图小程序部分 map标签的使用 创建小程序的步骤这里不再重复赘述,在wxml页面中放一个…...

xxl-job的分片广播+单播

1 介绍一下xxl-job XXL-JOB 是一个分布式任务调度平台&#xff0c;旨在为分布式应用系统提供开箱即用的调度解决方案。它非常易于使用&#xff0c;并具有很高的可扩展性。以下是 XXL-JOB 的详细介绍&#xff0c;包括其核心功能、架构设计、主要组件及其应用场景。 核心功能 简…...

情感分类代码

在进行自然语言处理中的情感分类时&#xff0c;通常需要准备以下几方面的内容&#xff1a; 1. **数据集**&#xff1a;高质量的标注数据集是关键&#xff0c;包括正面、负面和中性情感标记的文本。 2. **情感词典**&#xff1a;可用的情感词典&#xff0c;如SentiWordNet&…...

WPF—常用控件、属性、事件、详细介绍

WPF—常用控件、属性、事件、详细介绍 WPF&#xff08;Windows Presentation Foundation&#xff09;是微软推出的基于Windows 的用户界面框架&#xff0c;属于.NET Framework 3.0的一部分。它提供了统一的编程模型、语言和框架&#xff0c;真正做到了分离界面设计人员与开发人…...

Oracle遭遇bug导致共享内存无法分配报ORA-04031错误

1.故障描述 在7月17日上午11时左右&#xff0c;收到告警短信&#xff0c;提示集群节点2宕机&#xff0c;当即登陆该节点进行查看&#xff0c;发现数据库状态正常。但日志里出现大量的ORA-04031报错&#xff0c;提示无法分配shared_pool&#xff0c;当时手动执行shared pool刷新…...

深度学习在微纳光子学中的应用

深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向&#xff1a; 逆向设计 通过神经网络快速预测微纳结构的光学响应&#xff0c;替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...

云原生核心技术 (7/12): K8s 核心概念白话解读(上):Pod 和 Deployment 究竟是什么?

大家好&#xff0c;欢迎来到《云原生核心技术》系列的第七篇&#xff01; 在上一篇&#xff0c;我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在&#xff0c;我们就像一个拥有了一块崭新数字土地的农场主&#xff0c;是时…...

CMake基础:构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

【HTTP三个基础问题】

面试官您好&#xff01;HTTP是超文本传输协议&#xff0c;是互联网上客户端和服务器之间传输超文本数据&#xff08;比如文字、图片、音频、视频等&#xff09;的核心协议&#xff0c;当前互联网应用最广泛的版本是HTTP1.1&#xff0c;它基于经典的C/S模型&#xff0c;也就是客…...

Android 之 kotlin 语言学习笔记三(Kotlin-Java 互操作)

参考官方文档&#xff1a;https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java&#xff08;供 Kotlin 使用&#xff09; 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...

Typeerror: cannot read properties of undefined (reading ‘XXX‘)

最近需要在离线机器上运行软件&#xff0c;所以得把软件用docker打包起来&#xff0c;大部分功能都没问题&#xff0c;出了一个奇怪的事情。同样的代码&#xff0c;在本机上用vscode可以运行起来&#xff0c;但是打包之后在docker里出现了问题。使用的是dialog组件&#xff0c;…...

初学 pytest 记录

安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...

Mysql中select查询语句的执行过程

目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析&#xff08;Parser&#xff09; 2.4、执行sql 1. 预处理&#xff08;Preprocessor&#xff09; 2. 查询优化器&#xff08;Optimizer&#xff09; 3. 执行器…...

视觉slam十四讲实践部分记录——ch2、ch3

ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件,或者在构建过程中仍然引用了旧的路…...

AI+无人机如何守护濒危物种?YOLOv8实现95%精准识别

【导读】 野生动物监测在理解和保护生态系统中发挥着至关重要的作用。然而&#xff0c;传统的野生动物观察方法往往耗时耗力、成本高昂且范围有限。无人机的出现为野生动物监测提供了有前景的替代方案&#xff0c;能够实现大范围覆盖并远程采集数据。尽管具备这些优势&#xf…...