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

Vue: el-form 自定义校验规则

Vue 的 el-form 组件可以使用自定义校验规则进行表单验证。自定义校验规则可以通过传递一个函数来实现,该函数接受要校验的字段的值作为参数,并返回一个布尔值或一个 Promise 对象。

下面是一个示例,演示如何在 el-form 中使用自定义校验规则:

<template><el-form ref="form" :model="form" :rules="rules" label-width="80px"><el-form-item label="用户名" prop="username" :rules="usernameRules"><el-input v-model="form.username"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm">提交</el-button><el-button @click="resetForm">重置</el-button></el-form-item></el-form>
</template><script>
export default {data() {return {form: {username: ''},rules: {username: [{ required: true, message: '请输入用户名', trigger: 'blur' }]}};},methods: {submitForm() {this.$refs.form.validate(valid => {if (valid) {// 表单验证通过,提交表单console.log('提交表单');} else {// 表单验证失败,打印错误信息console.log('表单验证失败');return false;}});},resetForm() {this.$refs.form.resetFields();}},computed: {usernameRules() {return [{ required: true, message: '请输入用户名', trigger: 'blur' },{ validator: this.validateUsername, trigger: 'blur' }];}},methods: {validateUsername(rule, value, callback) {// 自定义校验规则if (value === 'admin') {callback(new Error('用户名已存在'));} else {callback();}}}
};
</script>

在上述例子中,我们定义了一个表单项 "用户名",并给它设置了两个校验规则,一个是必填规则,一个是自定义规则。自定义规则通过 `validator` 属性指向一个函数,该函数会在校验时调用。函数接受三个参数:`rule` 表示当前字段的验证规则,`value` 表示当前字段的值,`callback` 用来返回校验结果。当校验不通过时,通过调用 `callback` 函数并传递错误消息来报告校验失败。

这只是一个简单的例子,你可以根据你的具体需求来定义更复杂的自定义校验规则。

相关文章:

Vue: el-form 自定义校验规则

Vue 的 el-form 组件可以使用自定义校验规则进行表单验证。自定义校验规则可以通过传递一个函数来实现&#xff0c;该函数接受要校验的字段的值作为参数&#xff0c;并返回一个布尔值或一个 Promise 对象。 下面是一个示例&#xff0c;演示如何在 el-form 中使用自定义校验规则…...

8.14 ARM

1.练习一 .text 文本段 .global _start 声明一个_start函数入口 _start: _start标签&#xff0c;相当于C语言中函数mov r0,#0x2mov r1,#0x3cmp r0,r1beq stopsubhi r0,r0,r1subcc r1,r1,r0stop: stop标签&#xff0c;相当于C语言中函数b stop 跳转到stop标签下的第一条…...

Flink笔记

下面是你提供的文字整理后的结果&#xff1a; 1. Flink是一个针对流数据和批数据的分布式处理引擎&#xff0c;同时支持原生流处理的开源框架。 - 延迟低(毫秒级)&#xff0c;且能够保证消息传输不丢失不重复。 - 具有非常高的吞吐(每秒千万级)。 - 支持原生流处理。…...

深度学习在MRI运动校正中的应用综述

运动是MRI中的主要挑战之一。由于MR信号是在频率空间中获取的&#xff0c;因此除了其他MR成像伪影之外&#xff0c;成像对象的任何运动都会导致重建图像中产生伪影。深度学习被提出用于重建过程的几个阶段的运动校正。广泛的MR采集序列、感兴趣的解剖结构和病理学以及运动模式&…...

内存不足V4L2 申请DMC缓存报错问题

当内存不足时,V4L2可能存在申请DMA缓存报错,如下日志: 13:36:54:125 [15070.640862] rkcifhw fdfe0000.rkcif: swiotlb buffer is full (sz: 1843200 bytes) 13:36:54:125 [15070.640891] rkcifhw fdfe0000.rkcif: swiotlb: coherent allocation failed, size=1843200 13:3…...

论文笔记--Llama 2: Open Foundation and Fine-Tuned Chat Models

论文笔记--Llama 2: Open Foundation and Fine-Tuned Chat Models 1. 文章简介2. 文章概括3 文章重点技术3.1 预训练Pretraining3.1.1 预训练细节3.1.2 Llama2模型评估 3.2 微调Fine-tuning3.2.1 Supervised Fine-Tuning(FT)3.2.2 Reinforcement Learning with Human Feedback(…...

客达天下项目案例

本资料转载于传智播客https://www.itheima.com/ https://space.bilibili.com/3493265607232348 黑马程序员主办的全日制统招大学——大同互联网职业技术学院 预计2024年开始招生&#xff0c;敬请持续关注&#xff01; B站视频入口&#xff1a;002_接口项目介绍_哔哩哔哩_bili…...

系统设计类题目汇总二

12 如何在实际的生产者端减少数据库的IO次数&#xff1f; 我自己想到的&#xff1a; 1 对于局部性很强的数据&#xff0c;启用mysql缓存机制&#xff0c;这样就不用磁盘IO 2 对于行数很多的表&#xff0c;可以分库分表&#xff0c;单表的数据量下来了&#xff0c;则查找索引要…...

MySQL和Redis如何保证数据一致性

MySQL与Redis都是常用的数据存储和缓存系统。为了提高应用程序的性能和可伸缩性&#xff0c;很多应用程序将MySQL和Redis一起使用&#xff0c;其中MySQL作为主要的持久存储&#xff0c;而Redis作为主要的缓存。在这种情况下&#xff0c;应用程序需要确保MySQL和Redis中的数据是…...

Go学习第九天

使用sqlite3 package mainimport ("database/sql""fmt"_ "github.com/go-sql-driver/mysql""github.com/jmoiron/sqlx"_ "github.com/mattn/go-sqlite3""log""time" )var schema CREATE TABLE perso…...

kafka集成篇

kafka的Java客户端 生产者 1.引入依赖 <dependency><groupId>org.apache.kafka</groupId><artifactId>kafka-clients</artifactId><version>2.6.3</version></dependency>2.生产者发送消息的基本实现 /*** 消息的发送⽅*/ …...

go-安装部署

一、安装go 详细安装方式可以查看官网 # 下载 wget https://golang.google.cn/dl/go1.21.0.linux-amd64.tar.gz # 解压缩 tar -xzf go1.21.0.linux-amd64.tar.gz # 迁移目录 mv go /usr/local # 配置环境变量 export PATH$PATH:/usr/local/go/bin # 检查go的版本 go version有…...

vue项目的实用性总结

1、mockjs 基本使用 ★ 安装&#xff1a;npm i mockjs。 在src/mock/index.js内容如下&#xff1a; import Mock from mockjs //制订拦截规则 Mock.mock(http://www.0313.com,get,你好啊)记得在main.js中引入一下&#xff0c;让其参与整个项目的运行。 只要发出去的是get类型…...

IOC容器

DI&#xff08;依赖注入&#xff09;&#xff1a;DI&#xff08;Dependency Injection&#xff09;是一种实现松耦合和可测试性的软件设计模式。它的核心思想是将依赖关系的创建与管理交给外部容器&#xff0c;使得对象之间只依赖于接口而不直接依赖于具体实现类。通过依赖注入…...

若依框架浅浅介绍

由若依官网所给介绍可知 1、文件结构介绍 在ruoyi-admin的pom.xml文件中引入了ruoyi-framework、ruoyi-quartz和ruoyi-generatior模块&#xff0c;在ruoyi-framework的pom.xml文件中引入了ruoyi-system模块。 2、技术栈介绍 前端&#xff1a;Vue、Element UI后端&#xff1a…...

echarts 柱状图-折线图-饼图的基础使用

上图示例图表展示相关配置&#xff1a; var myChart echarts.init(this.$refs.firstMain);myChart.setOption({legend: { // 图例设置top: "15%",type: "scroll",orient: "vertical",//图例列表的布局朝向。left: "right",pageIconCo…...

mac电脑 node 基本操作命令

1. 查看node的版本 node -v2. 查看可安装的node版本 sudo npm view node versions3. 安装指定版本的node sudo n 18.9.04. 安装最新版本node sudo n latest5. 安装最新稳定版 sudo n stable6. 清楚node缓存 sudo npm cache clean -f7. 列举已经安装的node版本 n ls 8. 在…...

Hlang社区项目说明

文章目录 前言Hlang社区技术前端后端 前言 Hello,欢迎来到本专栏&#xff0c;那么这也是第一次做这种类型的专栏&#xff0c;如有不做多多指教。那么在这里我要隆重介绍的就是这个Hlang这个项目。 首先&#xff0c;这里我要说明的是&#xff0c;我们的这个项目其实是分为两个…...

RTC实验

一、RTC简介 RTC(Real Time Clock)即实时时钟&#xff0c;它是一个可以为系统提供精确的时间基准的元器件&#xff0c;RTC一般采用精度较高的晶振作为时钟源&#xff0c;有些RTC为了在主电源掉电时还可以工作&#xff0c;需要外加电池供电BCD码&#xff0c;四位二进制表示一位…...

C#多线程报错:The destination thread no longer exists.

WinForm&#xff0c;C#多线程报错&#xff1a; System.ComponentModel.InvalidAsynchronousStateException: An error occurred invoking the method. The destination thread no longer exists. 研究一番&#xff0c;找到了原因&#xff1a; 有问题的写法&#xff1a; ne…...

【JVM】- 内存结构

引言 JVM&#xff1a;Java Virtual Machine 定义&#xff1a;Java虚拟机&#xff0c;Java二进制字节码的运行环境好处&#xff1a; 一次编写&#xff0c;到处运行自动内存管理&#xff0c;垃圾回收的功能数组下标越界检查&#xff08;会抛异常&#xff0c;不会覆盖到其他代码…...

家政维修平台实战20:权限设计

目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系&#xff0c;主要是分成几个表&#xff0c;用户表我们是记录用户的基础信息&#xff0c;包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题&#xff0c;不同的角色&#xf…...

AspectJ 在 Android 中的完整使用指南

一、环境配置&#xff08;Gradle 7.0 适配&#xff09; 1. 项目级 build.gradle // 注意&#xff1a;沪江插件已停更&#xff0c;推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...

力扣-35.搜索插入位置

题目描述 给定一个排序数组和一个目标值&#xff0c;在数组中找到目标值&#xff0c;并返回其索引。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...

若依登录用户名和密码加密

/*** 获取公钥&#xff1a;前端用来密码加密* return*/GetMapping("/getPublicKey")public RSAUtil.RSAKeyPair getPublicKey() {return RSAUtil.rsaKeyPair();}新建RSAUti.Java package com.ruoyi.common.utils;import org.apache.commons.codec.binary.Base64; im…...

Java中栈的多种实现类详解

Java中栈的多种实现类详解&#xff1a;Stack、LinkedList与ArrayDeque全方位对比 前言一、Stack类——Java最早的栈实现1.1 Stack类简介1.2 常用方法1.3 优缺点分析 二、LinkedList类——灵活的双端链表2.1 LinkedList类简介2.2 常用方法2.3 优缺点分析 三、ArrayDeque类——高…...

Go 并发编程基础:select 多路复用

select 是 Go 并发编程中非常强大的语法结构&#xff0c;它允许程序同时等待多个通道操作的完成&#xff0c;从而实现多路复用机制&#xff0c;是协程调度、超时控制、通道竞争等场景的核心工具。 一、什么是 select select 类似于 switch 语句&#xff0c;但它用于监听多个通…...

Java毕业设计:办公自动化系统的设计与实现

JAVA办公自动化系统 一、系统概述 本办公自动化系统基于Java EE平台开发&#xff0c;实现了企业日常办公的数字化管理。系统包含文档管理、流程审批、会议管理、日程安排、通讯录等核心功能模块&#xff0c;采用B/S架构设计&#xff0c;支持多用户协同工作。系统使用Spring B…...

[学习笔记]使用git rebase做分支差异化同步

在一个.NET 项目中&#xff0c;使用了Volo.Abp库&#xff0c;但出于某种原因&#xff0c;需要源码调试&#xff0c;因此&#xff0c;使用源码方式集成的项目做了一个分支archive-abp-source 其中引用方式变更操作的提交为&#xff1a;7de53907 后续&#xff0c;在master分支中…...

如何安装并使用RustDesk

参考&#xff1a; 搭建 RustDesk Server&#xff1a;打造属于自己的远程控制系统&#xff0c;替代 TeamViewer 和 ToDesk&#xff01; 向日葵、ToDesk再见&#xff01;自己动手&#xff0c;自建RustDesk远程服务器真香&#xff01; 通俗易懂&#xff1a;RustDesk Server的搭…...