Element Plus 表单校验

原理

  • 为 rules 属性传入约定的验证规则,并将 form-Item 的 prop 属性设置为需要验证的特殊键值
  • :model和:rules中字段的名称需要一致
    在这里插入图片描述

示例:

<template><el-form ref="ruleFormRef" :model="ruleForm" :rules="rules"><el-form-item label="用户名" prop="name"><el-input v-model="ruleForm.name" /></el-form-item><el-form-item><el-button type="primary" @click="submitForm(ruleFormRef)"> Create </el-button></el-form-item></el-form>
</template><script lang="ts" setup>
import { reactive, ref } from "vue";
import type { FormInstance } from "element-plus";const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive({name: ""
});const rules = reactive({name: [{ required: true, message: "请输入用户名", trigger: "blur" },{ min: 3, max: 5, message: "用户名长度在 3 到 5 个字符", trigger: "blur" }]
});const submitForm = async (formEl: FormInstance | undefined) => {if (!formEl) return;await formEl.validate((valid, fields) => {if (valid) {console.log("数据正常");} else {console.log("数据有误", fields);}});
};
</script>

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

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

相关文章

Spring Security——13,认证成功失败注销成功处理器

认证成功&&失败&&注销成功处理器 说明&#xff1a;一、认证成功处理器1.1 自定义成功处理器1.2 配置自定义成功处理器 二、认证失败处理器2.1 自定义失败处理器2.2 配置自定义失败处理器 三、登出成功处理器3.1 自定义登出处理器3.2 配置登出处理器 四、完结撒…

Excel全套213集教程

Excel全套213集教程 包含技术入门93集 图表17集 数据透视35集 公式函数68 基础入门 93节 https://www.alipan.com/s/cMxuPstkS1x 提取码: 77dd 点击链接保存&#xff0c;或者复制本段内容&#xff0c;打开「阿里云盘」APP &#xff0c;无需下载极速在线查看&#xff0c;视…

【C语言】if语句选择题

前言 题目一&#xff1a; 题目二&#xff1a; 题目三&#xff1a; 题目四&#xff1a; 题目五&#xff1a; 题目六&#xff1a; 题目七&#xff1a; 题目八&#xff1a; 前言 关于if语句相关的选择题 题目一&#xff1a; 关于if语句说法正确是&#xff1a;( ) A .if语…

gitlab使用

个人笔记&#xff08;整理不易&#xff0c;有帮助点个赞&#xff09; 笔记目录&#xff1a;学习笔记目录_pytest和unittest、airtest_weixin_42717928的博客-CSDN博客 个人随笔&#xff1a;工作总结随笔_8、以前工作中都接触过哪些类型的测试文档-CSDN博客 目录 一&#xff1a…

C语言中的pow()和floor()

C语言中的pow()函数用于计算一个数的指数幂。 首先&#xff0c;要使用pow()函数&#xff0c;需要包含头文件<math.h>。这是因为pow()函数是在数学库中定义的&#xff0c;所以需要通过包含相应的头文件来访问它。 其次&#xff0c;pow()函数的原型是double pow(double x…

windows下使用ZLMediaKit-API+FFmpeg+opengl拉取解码播放流媒体

ZLMediaKit简介 ZLMediaKit是一个基于C11的高性能运营级流媒体服务框架&#xff0c;和SRS类似&#xff0c;功能强大&#xff0c;性能优异&#xff0c;提供多种支持多种协议(RTSP/RTMP/HLS/HTTP-FLV/WebSocket-FLV/GB28181/HTTP-TS/WebSocket-TS/HTTP-fMP4/WebSocket-fMP4/MP4/…

基于Springboot考研资讯平台的设计与实现(论文+源码)_kaic

摘 要 随着现在网络的快速发展&#xff0c;网络的应用在各行各业当中它很快融入到了许多学校的眼球之中&#xff0c;他们利用网络来做这个电商的服务&#xff0c;随之就产生了“考研资讯平台”&#xff0c;这样就让学生考研资讯平台更加方便简单。 对于本考研资讯平台的设计来…

Python爬虫技术快速入门

一、简介 Python爬虫是一种自动化提取互联网上数据的技术&#xff0c;它可以访问网页、解析HTML内容&#xff0c;并从中提取有用的信息。本文将介绍如何使用Python编写简单而有效的爬虫程序。 二、准备工作 在编写Python爬虫之前&#xff0c;我们需要安装一些必要的库。以下…

计算机网络 网络命令的使用

一、实验内容 1.PING网络命令的实验 ping 127.0.0.1(内部回环测试)ping 本主机的IP地址ping 默认网关地址ping远端目的地的IP地址ping localhostping域名 2.其他网络命令实验 命令用途ipconfig/all 显示当前系统网络配置&#xff0c;包括IP地址、子网掩码、默认网关等trace…

Ubuntu 22.04进行远程桌面连接

文心一言 Ubuntu 22.04进行远程桌面连接&#xff0c;无论是连接到Windows 10还是另一个Ubuntu 22.04&#xff0c;都可以通过不同的方式实现。以下是具体的步骤&#xff1a; 连接到Windows 10 在Windows 10上开启远程桌面功能&#xff1a;首先&#xff0c;需要在Windows 10上…

Java设计模式之创建型模式(二)原型模式

原型模式 1、原型模式1-1、应用场景1-2、举个 软栗子1-3、举个 硬栗子1-3、举个实务栗子 学习原型模式的目的&#xff1a;原型模式的目的在于通过复制现有的实例来创建新的对象&#xff0c;以避免通过构造函数创建对象时可能带来的性能开销&#xff0c;同时可以控制对象的深度复…

Ubuntu中变更文件夹的操作权限(chmod使用)

sudo chmod 777 /opt/software/ 777表示所有人都可以修改&#xff0c;读写等操。 sudo chmod 750 /opt/software/ 为了安全起见&#xff0c;上传完毕修改文件夹权限为750,即只有文件夹创建人可以操作 chmod参数说明 第一个数字表示文件所有者的权限 第二个数字表示文件所有…

LangChain - PromptTemplate

文章目录 关于 Prompt关于 PromptTemplate基本创建无变量输入1个变量多变量使用 from_template 自动推断 input_variables 聊天模板使用 from_template 方法构建使用 PromptTemplate 构建 MessagePromptTemplate使用一或多个 MessagePromptTemplates 构建一个 ChatPromptTempla…

pikachu 靶场通关(全)

一.暴力破解 1.1基于表单的暴力破解 1.1.1 漏洞利用 burp抓包&#xff0c;ctrli 添加爆破 根据返回长度得到两个用户 admin 123456 test abc123 1.1.2 源代码分析 文件路径在&#xff1a;vul/burteforce/bf_form.php 通过注释以及说明了&#xff0c;没有验证码也没有其他的…

学习java第三十七天

Spring的优势 1.方便解耦&#xff0c;简化开发&#xff1a;通过spring的ioc容器&#xff0c;将对象间的依赖关系交由Spring进⾏控制&#xff0c;避免硬编码所造成的 过度程序耦合&#xff0c;⽤户也不必再为单例模式类、属性⽂件解析等这些很底层的需求编写代码&#xff0c;可…

上海计算机学会 2024年3月月赛 丙组T4 交易记录(map)

第四题&#xff1a;T4交易记录 标签&#xff1a; m a p map map题意&#xff1a;给定 n n n条股票买入卖出操作&#xff0c;有对应的交易单价 a i a_i ai​和交易数量 b i b_i bi​&#xff0c;分别将多笔买入卖出交易价格相同的进行交易数量合并。买入记录按照交易价格从低到…

【C语言】结构体、枚举、联合(自定义类型)

文章目录 前言一、结构体1.结构体的声明2.结构体的自引用3.结构体变量的定义和初始化4.结构体成员的访问5.结构体内存对齐&#xff08;重点&#xff09;6.#pragma修改默认对齐数7.结构体传参 二、位段1.位段的声明2.位段的内存分配3.位段的跨平台问题 三、枚举四、联合 &#x…

全速前进:2024年MAD(机器学习,人工智能和数据)前景(20000字长文)

THE 2024 MAD (MACHINE LEARNING, ARTIFICIAL INTELLIGENCE & DATA) LANDSCAPE 是FirstMark对数据、分析、机器学习和人工智能生态系统的第十次年度展望和「现状」描述 。 在这个领域的10多年里&#xff0c;事情从来没有像今天这样令人兴奋和充满希望。我们多年来描述的所…

编译Nginx配置QUIC/HTTP3.0

1. 安装BoringSSL sudo apt update sudo apt install -y build-essential ca-certificates zlib1g-dev libpcre3 \ libpcre3-dev tar unzip libssl-dev wget curl git cmake ninja-build mercurial \ libunwind-dev pkg-configgit clone --depth1 https://github.com/google/b…

【蓝桥杯】赛前一周模板

小蜜蜂代码风格的&#xff0c;模块都在&#xff0c;希望能够帮助你吧。 目录 AT24C02存储芯片 DS18B20温度传感器 DS1302 时钟 NE555频率测量 PCF8591 AD PWM波 超声波测距 串口UART 4X4矩阵按键 AT24C02存储芯片 void Write_AT24C02(unsigned char addr,unsigned …