React-hook-form-mui(三):表单验证
前言
在上一篇文章中,我们介绍了react-hook-form-mui的基础用法。本文将着重讲解表单验证功能。
react-hook-form-mui提供了丰富的表单验证功能,可以通过validation属性来设置表单验证规则。本文将详细介绍validation的三种实现方法,以及如何与提交按钮联动。
Demo
以下是一个表单验证的 demo,我们将通过三种方法来实现表单验证:
import React from "react";
import { useForm } from "react-hook-form";
import { Button } from "@mui/material";
import { FormContainer, TextFieldElement } from "react-hook-form-mui";const URL_REGEXP =\/^[A-Za-z][A-Za-z\d.+-]*:\/*(?:\w+(?::\w+)?@)?[^\s/]+(?::\d+)?(?:\/[\w#!:.,?+=&%@\-/]*)?$\/;export interface UserSettings {firstName: string;lastName: string;url: string;
}/*** @descpition: lastName长度验证* @param _value 当前表单元素的值*/
const validateLastNameLength = (_value: string) => {return _value.length < 2 ? "Url is invalid!" as any : Promise.resolve();
};const MyForm = () => {const formContext = useForm<UserSettings>({defaultValues: {firstName: "",lastName: "",url: ""},mode: "all" // 验证模式切换为all});const onSubmit = (data: UserSettings) => {console.log(data);};return (<FormContainerformContext={formContext}onSuccess={(data) => {onSubmit(data);}}>{/* 使用 validation 属性设置表单验证规则 */}<TextFieldElementname="firstName"label="First Name"validation={{required: "First Name is required!"}}/><TextFieldElementname="lastName"label="First Name"validation={{validate: validateLastNameLength}}/><TextFieldElementname="url"label="Url"/><Buttontype="submit"<Buttontype="submit"// 当表单所有元素都验证通过并且表单元素发生过改变后,可以点击提交按钮disabled={!formContext.formState.isValid || !formContext.formState.isDirty}>Submit</Button></FormContainer>);
};export default MyForm;
验证触发模式
mode
首先,我们需要在formContext中规定mode属性,这个属性用来确定form何时触发验证规则。mode提供了以下5中触发方式:
ValidationMode = {onBlur: "onBlur";onChange: "onChange";onSubmit: "onSubmit";onTouched: "onTouched";all: "all";
}
根据项目需求,开发者可自行选择触发方式,本例中使用的是all,即需要匹配所有触发方式。
三种表单验证的方法:
- 自定义的
required的提示
validation={{required: "First Name is required!"}}
- 通过正则匹配来验证表单元素
validation={{pattern: {value: URL_REGEXP,message: 'Url is invalid!'}}}
- 通过自定义的验证规则来验证表单元素:
validation={{validate: validateLastNameLength
}}
通过以上三种方式,我们可以规定用户输入表单的值并提供自定义的错误提示。
何时能够点击提交按钮
在react-hook-form-mui中,提供了简便的api去控制是否能够点击提交按钮。分别是:
formContext.formState.isValid: 验证表单元素是否合法。formContext.formState.isDirty: 验证表单元素是否发生过改变。
通过这两种方法,我们可以很轻松地控制何时能够点击提交按钮。
总结
以上是关于React-hook-form-mui的表单验证的的用法。希望本文会对你有所帮助。如果有什么问题,可在下方留言沟通。
相关文章:
React-hook-form-mui(三):表单验证
前言 在上一篇文章中,我们介绍了react-hook-form-mui的基础用法。本文将着重讲解表单验证功能。 react-hook-form-mui提供了丰富的表单验证功能,可以通过validation属性来设置表单验证规则。本文将详细介绍validation的三种实现方法,以及如何…...
【私域运营秘籍】4大用户调研方法,让你轻松掌握用户心理!
我们常说私域运营的核心是用户运营。根据二八法则,20%的超级用户贡献企业80%的利润。因此,企业应该根据用户的价值贡献来有针对性地进行运营。 然而,在实际的私域运营中,我们不仅需要找出贡献价值不同的用户,还可以从…...
2.8寸 ILI9341 TFTLCD 学习移植到STM32F103C8T6
2.8寸 ILI9341 TFTLCD 学习移植到STM32F103C8T6 文章目录 2.8寸 ILI9341 TFTLCD 学习移植到STM32F103C8T6前言第1章 LCD简介1.1 LCD硬件接口介绍 第2章 LCD指令介绍第3章 LCD 8080驱动方式3.1 8080写时序3.2 8080读时序 第4章 LCD 驱动代码部分4.1 修改代码部分4.2 代码工程下载…...
Java利用TCP实现简单的双人聊天
一、创建新项目 首先创建一个新的项目,并命名为聊天。然后创建包,创建两个类,客户端(SocketClient)和服务器端(SocketServer) 二、实现代码 客户端代码: package 聊天; import ja…...
软件压力测试的重要性与用途
在当今数字化的时代,软件已经成为几乎所有行业不可或缺的一部分。随着软件应用规模的增加和用户数量的上升,软件的性能变得尤为关键。为了确保软件在面对高并发和大负载时仍然能够保持稳定性和可靠性,软件压力测试变得至关重要。下面是软件压…...
【数据挖掘】国科大苏桂平老师数据库新技术课程作业 —— 第二次作业
1 设 F { A B → C , B → D , C D → E , C E → G H , G → A } F\{AB\rightarrow C,B\rightarrow D, CD\rightarrow E, CE\rightarrow GH, G\rightarrow A \} F{AB→C,B→D,CD→E,CE→GH,G→A},用推理的方法证明 F ∣ A B → G F\;|AB\rightarrow G F∣AB→…...
Qt + MySQL(简单的增删改查)
Qt编译MySql插件教程 帮助: SQL Programming QSqlDatabase 静态函数 1.drivers(),得到可以使用的数据库驱动名字的集合 [static] QStringList QSqlDatabase::drivers();2.addDatabase(),添加一个数据库实例 [static] QSqlDatabase QSql…...
postgresql设置免密登录
您提供的步骤描述了在 PostgreSQL 数据库环境中配置服务器间的 SSH 无密码登录和数据库用户认证的过程。这些步骤主要用于设置一个高可用性、负载平衡的数据库集群环境。让我们逐一解释这些步骤的目的和应用场景: 1. 启动 PostgreSQL 服务 systemctl start postgr…...
视频汇聚/音视频流媒体视频平台/视频监控EasyCVR分享页面无法播放,该如何解决?
国标GB28181安防视频监控/视频集中存储/云存储EasyCVR平台可拓展性强、视频能力灵活、部署轻快,可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等,以及支持厂家私有协议与SDK接入,包括海康Ehome、海大宇等设备的SDK等。平台既具备传统…...
机器学习-逻辑回归
一、引言 逻辑回归(Logistic Regression)是一种广泛应用于分类问题的监督学习算法。尽管名字中含有“回归”二字,但这并不意味着它用于解决回归问题。相反,逻辑回归专注于解决二元或多元分类问题,如邮件是垃圾邮件还是…...
Edge调用Aria2下载
一、准备工作 1、Edge浏览器:Windows系统自带或点击下载; 2、Aria2 gui:点击github下载或自行搜索下载其他版本; 二、启动Aria2 gui 解压下载的Aria2 gui到任意目录,点击“Aria2c启动器”或“AriaNg启动器”皆可。…...
解密QQ号——C语言
题目: 有一串已加密的数字“6 3 1 7 5 8 9 2 4”解密规则:首先将第1个数字删除,紧接着将第2个数字放到这串数字的末尾,再将第3个数字删除并将第4个数字放到这串数字的末尾,再将第5个数删除 代码实现: #inc…...
三、jvm中的对象及引用
一、对象在jvm的创建过程 检查加载-->分配内存-->内存空间初始化-->设置-->对象初始化 1) 检查加载 首先检查这个指令的参数是否能在常量池中定位到一个类的符号引用,并且检查类是否已经被加载、解析和初始化过。 虚拟机遇到一条 new 指令时…...
Docker网络架构介绍
本文主要介绍了Docker容器的单机网络架构与集群网络架构,辅以演示,并简单介绍了网络管理中的命令。 前文: Docker的安装与简单操作命令-CSDN博客 docker网络原理介绍 与ovs类似,docker容器采用veth-pair linux bridge (虚拟交…...
Android studio新版本aar包导入项目中配置
目录 1、so、aar导入在项目build.gradle中配置 2、新版本迁移到setting.grade配置 1、so、aar导入在项目build.gradle中配置 repositories {flatDir {dirs libs} }2、新版本迁移到setting.grade配置 flatDir {dirs libs } 如下图所示 pluginManagement {repositories {gra…...
HBase-架构与设计
HBase架构与设计 一、背景二、HBase概述1.设计特点2.适用场景2.1 海量数据2.2 稀疏数据2.3 多版本数据2.4 半结构或者非结构化数据 三、数据模型1.表逻辑结构2.RowKey3.Column Family4.TimeStamp5.存储结构 四、HBase架构图1.Client2.Zookeeper3.HMaster4.HRegionServer5.HRegi…...
SpringBoot基础系列:工具类使用
断言 Assert // 要求参数 object 必须为非空(Not Null),否则抛出异常,不予放行 // 参数 message 参数用于定制异常信息。 void notNull(Object object, String message) // 要求参数必须空(Null)ÿ…...
使用 nohup java - jar 不输出日志
要在使用nohup java -jar命令时不输出日志,可以将标准输出和标准错误输出重定向到特殊设备文件/dev/null。这样做将会丢弃所有的输出。 以下是在Linux中使用nohup java -jar命令并禁止输出日志的示例: 复制代码 nohup java -jar your-application.jar …...
前端开发学习 (五) 生命周期函数、Ajax请求
关于vue实例的声明周期,从Vue实例创建、运行、到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期 (https://cn.vuejs.org/v2/guide/instance.html#实例生命周期 ) 而声明周期勾子就是生命周期…...
TypeScript中的单件设计模式
基本概念 (1) 了解设计模式 设计模式通俗的讲,就是一种更好的编写代码方案,打个比喻:从上海到武汉,你可以选择做飞机,做轮船,开车,骑摩托车多种方式,把出行…...
Excel VBA 技巧:让工作表中的形状宏自适应
在日常工作中,Excel 不仅仅是数据处理的工具,更是我们自动化办公的利器。今天我们要探讨的是如何让Excel工作表中的形状宏能够自适应地工作,即使在复制工作表到新的工作簿时也能保持其功能性。 问题背景 假设我们有一个工作簿BOOK1,其中包含一个名为TEST的工作表和一个名…...
OpenClaw配置备份:千问3.5-35B-A3B-FP8环境快速迁移方案
OpenClaw配置备份:千问3.5-35B-A3B-FP8环境快速迁移方案 1. 为什么需要配置备份? 上周我的主力开发机突然硬盘故障,导致OpenClaw与千问3.5-35B-A3B-FP8的对接配置全部丢失。重新配置花了整整两天时间——从模型地址验证、飞书通道重建到技能…...
前端测试吐槽:别再写那些没用的测试了!
前端测试吐槽:别再写那些没用的测试了! 毒舌时刻 前端测试就像体检——每个人都知道要做,但真正认真做的没几个。Jest、React Testing Library、Cypress... 一堆测试工具让你挑花了眼,结果你的测试还是写得像一坨屎。 我就想不明白…...
STM32大棚花卉物联网护养系统设计与实现
1. 项目概述这个大棚花卉护养系统是我去年为一个花卉种植基地设计的物联网解决方案。当时客户反映传统人工管理方式效率低下,经常出现浇水不及时、温度控制不精准等问题。经过三个月的开发和调试,这套系统成功将花卉产量提升了30%,同时减少了…...
西门子S7-200SMART PLC与组态王7.0通信在压铸机控制中的应用:附带完整程序与多媒体资料
西门子S7-200SMART PLC和组态王7.0通信 控制压铸机 附带PLC程序组态王程序组态王运行视频组态王运行图片 最近在折腾压铸机自动化改造项目,用西门子S7-200 SMART PLC配合组态王7.0做上位监控。这个组合在中小型设备上还挺常见,但实际调试时通信配置这块…...
短视频 SEO 优化对于新手有什么建议_如何分析短视频的 SEO 效果
短视频 SEO 优化对于新手有什么建议 在当今数字化时代,短视频平台已经成为了人们获取信息和娱乐的重要途径。无论是抖音、快手,还是TikTok,短视频内容的迅速增长引发了广大创作者对SEO(搜索引擎优化)的关注。对于新手…...
游戏盾导致 Unity/UE 引擎崩溃?内存占用、SO 库冲突深度排查
接入游戏盾后碰到 Unity、UE 编辑器或打包后崩溃、内存暴涨、SO 库冲突的问题,应该都不陌生。我最近在几个项目里反复踩过这些坑,从日志分析、内存追踪到 SO 符号冲突,一步步定位下来,把完整排查流程和解决方案整理出来࿰…...
Python数据可视化入门:从零开始掌握三大核心库
在数据科学领域,数据可视化是连接数据与洞见的关键桥梁。通过图表和图形,我们能够直观地理解数据模式、发现异常值、并向他人清晰传达分析结果。Python作为数据分析的主流语言,提供了丰富强大的可视化工具库。本文将带你从零开始,…...
Pixel Dream Workshop应用场景:像素游戏测试用占位图(placeholder)批量生成
Pixel Dream Workshop应用场景:像素游戏测试用占位图批量生成 1. 像素游戏开发中的占位图挑战 在独立游戏开发过程中,美术资源往往是开发进度的瓶颈之一。特别是对于像素风格的游戏项目,开发者经常面临一个两难选择: 等待专业美…...
Claude Code 官方回应代码泄漏:这次,他们没有“甩锅人”
这两天,Claude Code 的“代码泄漏”事件在技术圈引发了不少讨论。各种版本的故事层出不穷,甚至还有营销号声称“新员工背锅被开除”。但从官方回应来看,事情的走向,其实完全不一样。👉 Claude Code 团队,正…...
