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…

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;同时可以控制对象的深度复…

pikachu 靶场通关(全)

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

Web 后台项目,权限如何定义、设置、使用:菜单权限、按钮权限 ts element-ui-Plus

Web 后台项目&#xff0c;权限如何定义、设置、使用&#xff1a;菜单权限、按钮权限 ts element-ui-Plus 做一个后台管理项目&#xff0c;里面需要用到权限管理。这里说一下权限定义的大概&#xff0c;代码不多&#xff0c;主要讲原理和如何实现它。 一、权限管理的原理 权限…

自动驾驶基础技术-无迹卡尔曼滤波UKF

自动驾驶基础技术-无迹卡尔曼滤波UKF Unscented Kalman Filter是解决非线性卡尔曼滤波的另一种思路&#xff0c;它利用Unscented Transform来解决概率分布非线性变换的问题。UnScented Kalman Filter不需要像Extended Kalman Filter一样计算Jacobin矩阵&#xff0c;在计算量大…

Pixel 手机上连接提示受阻,无法上网-解决方法

命令行中输入 adb shell settings delete global captive_portal_https_urladb shell settings delete global captive_portal_http_url输入服务器信息 adb shell settings put global captive_portal_http_url http://connect.rom.miui.com/generate_204adb shell settings …

从零开始:构建、打包并上传个人前端组件库至私有npm仓库的完整指南

文章目录 一、写组件1、注册全局组件方法2、组件13、组件2 二、测试三、发布1、配置package.json2、生成库包3、配置发布信息4、发布 四、使用1、安装2、使用 五、维护1、维护和更新2、注意事项 一、写组件 确定组件库的需求和功能&#xff1a;在开始构建组件库之前&#xff0c…

基于jenkins+gitlab+docker部署zabbix

背景 我现在已经在一台服务器上部署了jenkins和gitlab&#xff0c;现在有一个场景是需要在服务器上再部署一个zabbix&#xff0c;需要通过jenkins加上gitlab部署&#xff0c;并且要求zabbix是通过docker部署的 前提条件 jenkins、gitlab已完成部署并能正常访问&#xff0c;服…

再探Java为面试赋能(二)Java基础知识(二)反射机制、Lambda表达式、多态

文章目录 前言1.4 反射机制1.4.1 Class对象的获取1.4.2 Class类的方法1.4.3 通过反射机制修改只读类的属性 1.5 Lambda表达式1.5.1 函数式接口1.5.2 Lambda表达式的使用 1.6 多态1.6.1 多态的概念1.6.2 多态的实现条件1.6.3 重载&#xff08;Overload&#xff09;和重写&#x…