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

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,即需要匹配所有触发方式。

三种表单验证的方法:

  1. 自定义的required的提示
validation={{required: "First Name is required!"}}
  1. 通过正则匹配来验证表单元素
validation={{pattern: {value: URL_REGEXP,message: 'Url is invalid!'}}}
  1. 通过自定义的验证规则来验证表单元素:
validation={{validate: validateLastNameLength
}}

通过以上三种方式,我们可以规定用户输入表单的值并提供自定义的错误提示。

何时能够点击提交按钮

react-hook-form-mui中,提供了简便的api去控制是否能够点击提交按钮。分别是:

  • formContext.formState.isValid: 验证表单元素是否合法。
  • formContext.formState.isDirty: 验证表单元素是否发生过改变。

通过这两种方法,我们可以很轻松地控制何时能够点击提交按钮。

总结

以上是关于React-hook-form-mui的表单验证的的用法。希望本文会对你有所帮助。如果有什么问题,可在下方留言沟通。

相关文章:

React-hook-form-mui(三):表单验证

前言 在上一篇文章中&#xff0c;我们介绍了react-hook-form-mui的基础用法。本文将着重讲解表单验证功能。 react-hook-form-mui提供了丰富的表单验证功能&#xff0c;可以通过validation属性来设置表单验证规则。本文将详细介绍validation的三种实现方法&#xff0c;以及如何…...

【私域运营秘籍】4大用户调研方法,让你轻松掌握用户心理!

我们常说私域运营的核心是用户运营。根据二八法则&#xff0c;20%的超级用户贡献企业80%的利润。因此&#xff0c;企业应该根据用户的价值贡献来有针对性地进行运营。 然而&#xff0c;在实际的私域运营中&#xff0c;我们不仅需要找出贡献价值不同的用户&#xff0c;还可以从…...

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实现简单的双人聊天

一、创建新项目 首先创建一个新的项目&#xff0c;并命名为聊天。然后创建包&#xff0c;创建两个类&#xff0c;客户端&#xff08;SocketClient&#xff09;和服务器端&#xff08;SocketServer&#xff09; 二、实现代码 客户端代码&#xff1a; package 聊天; import ja…...

软件压力测试的重要性与用途

在当今数字化的时代&#xff0c;软件已经成为几乎所有行业不可或缺的一部分。随着软件应用规模的增加和用户数量的上升&#xff0c;软件的性能变得尤为关键。为了确保软件在面对高并发和大负载时仍然能够保持稳定性和可靠性&#xff0c;软件压力测试变得至关重要。下面是软件压…...

【数据挖掘】国科大苏桂平老师数据库新技术课程作业 —— 第二次作业

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}&#xff0c;用推理的方法证明 F ∣ A B → G F\;|AB\rightarrow G F∣AB→…...

Qt + MySQL(简单的增删改查)

Qt编译MySql插件教程 帮助&#xff1a; SQL Programming QSqlDatabase 静态函数 1.drivers()&#xff0c;得到可以使用的数据库驱动名字的集合 [static] QStringList QSqlDatabase::drivers();2.addDatabase()&#xff0c;添加一个数据库实例 [static] QSqlDatabase QSql…...

postgresql设置免密登录

您提供的步骤描述了在 PostgreSQL 数据库环境中配置服务器间的 SSH 无密码登录和数据库用户认证的过程。这些步骤主要用于设置一个高可用性、负载平衡的数据库集群环境。让我们逐一解释这些步骤的目的和应用场景&#xff1a; 1. 启动 PostgreSQL 服务 systemctl start postgr…...

视频汇聚/音视频流媒体视频平台/视频监控EasyCVR分享页面无法播放,该如何解决?

国标GB28181安防视频监控/视频集中存储/云存储EasyCVR平台可拓展性强、视频能力灵活、部署轻快&#xff0c;可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等&#xff0c;以及支持厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等。平台既具备传统…...

机器学习-逻辑回归

一、引言 逻辑回归&#xff08;Logistic Regression&#xff09;是一种广泛应用于分类问题的监督学习算法。尽管名字中含有“回归”二字&#xff0c;但这并不意味着它用于解决回归问题。相反&#xff0c;逻辑回归专注于解决二元或多元分类问题&#xff0c;如邮件是垃圾邮件还是…...

Edge调用Aria2下载

一、准备工作 1、Edge浏览器&#xff1a;Windows系统自带或点击下载&#xff1b;   2、Aria2 gui&#xff1a;点击github下载或自行搜索下载其他版本&#xff1b; 二、启动Aria2 gui 解压下载的Aria2 gui到任意目录&#xff0c;点击“Aria2c启动器”或“AriaNg启动器”皆可。…...

解密QQ号——C语言

题目&#xff1a; 有一串已加密的数字“6 3 1 7 5 8 9 2 4”解密规则&#xff1a;首先将第1个数字删除&#xff0c;紧接着将第2个数字放到这串数字的末尾&#xff0c;再将第3个数字删除并将第4个数字放到这串数字的末尾&#xff0c;再将第5个数删除 代码实现&#xff1a; #inc…...

三、jvm中的对象及引用

一、对象在jvm的创建过程 检查加载-->分配内存-->内存空间初始化-->设置-->对象初始化 1) 检查加载 首先检查这个指令的参数是否能在常量池中定位到一个类的符号引用&#xff0c;并且检查类是否已经被加载、解析和初始化过。 虚拟机遇到一条 new 指令时&#xf…...

Docker网络架构介绍

本文主要介绍了Docker容器的单机网络架构与集群网络架构&#xff0c;辅以演示&#xff0c;并简单介绍了网络管理中的命令。 前文&#xff1a; Docker的安装与简单操作命令-CSDN博客 docker网络原理介绍 与ovs类似&#xff0c;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 必须为非空&#xff08;Not Null&#xff09;&#xff0c;否则抛出异常&#xff0c;不予放行 // 参数 message 参数用于定制异常信息。 void notNull(Object object, String message) // 要求参数必须空&#xff08;Null&#xff09;&#xff…...

使用 nohup java - jar 不输出日志

要在使用nohup java -jar命令时不输出日志&#xff0c;可以将标准输出和标准错误输出重定向到特殊设备文件/dev/null。这样做将会丢弃所有的输出。 以下是在Linux中使用nohup java -jar命令并禁止输出日志的示例&#xff1a; 复制代码 nohup java -jar your-application.jar …...

前端开发学习 (五) 生命周期函数、Ajax请求

关于vue实例的声明周期&#xff0c;从Vue实例创建、运行、到销毁期间&#xff0c;总是伴随着各种各样的事件&#xff0c;这些事件&#xff0c;统称为生命周期 &#xff08;https://cn.vuejs.org/v2/guide/instance.html#实例生命周期 &#xff09; 而声明周期勾子就是生命周期…...

TypeScript中的单件设计模式

基本概念 &#xff08;1&#xff09; 了解设计模式 设计模式通俗的讲&#xff0c;就是一种更好的编写代码方案&#xff0c;打个比喻&#xff1a;从上海到武汉&#xff0c;你可以选择做飞机&#xff0c;做轮船&#xff0c;开车&#xff0c;骑摩托车多种方式&#xff0c;把出行…...

别再手动算不确定度了!用C++代码一键搞定科大奥锐虚拟仿真实验(附完整代码)

用C解放物理实验&#xff1a;不确定度计算的自动化实践 物理实验报告中最令人头疼的部分莫过于那些繁琐的不确定度计算。每次测量完数据&#xff0c;面对满纸的数字和公式&#xff0c;总有一种被数学淹没的窒息感。记得上学期做"长度与固体密度测量"实验时&#xff0…...

别再只看FLOPs了!从VoVNet的OSA模块看高效网络设计的实战误区

从VoVNet的OSA模块看高效网络设计的实战误区&#xff1a;为什么你的模型跑得比论文慢&#xff1f; 当我们在GitHub上复现一篇顶会论文时&#xff0c;最沮丧的瞬间莫过于&#xff1a;明明FLOPs和参数量完全匹配&#xff0c;实际推理速度却比论文报告值慢了30%。这个问题在部署De…...

Android学习资源与成长指南

Android学习资源与成长指南 概述 本文将Android开发者的成长路径、学习资源、开源项目、技术社区、推荐书籍和面试准备整合为一份完整指南&#xff0c;覆盖从入门到架构师的全阶段。一、学习路线图&#xff1a;从入门到架构师 1.1 第一阶段&#xff1a;初级开发&#xff08;0-6…...

2025届学术党必备的十大降重复率平台推荐榜单

Ai论文网站排名&#xff08;开题报告、文献综述、降aigc率、降重综合对比&#xff09; TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 若维普系统检测出高AI生成内容&#xff0c;那么可采用如下方法来降低AI率&#xff1a;将长句…...

5个维度教你掌握游戏自动化与效率工具开发

5个维度教你掌握游戏自动化与效率工具开发 【免费下载链接】JX3Toy 一个自动化测试DPS的小工具 项目地址: https://gitcode.com/GitHub_Trending/jx/JX3Toy 在游戏开发与玩家体验优化领域&#xff0c;游戏脚本开发正成为提升效率的关键技术。本文将系统介绍一款开源项目…...

AI建站工具分人群解决方案:找到最适合你的那一款

同样是建站&#xff0c;小微企业主、自由职业者、市场运营人员的需求可能天差地别。用一套方案解决所有问题&#xff0c;结果往往是“都不够完美”。这篇针对不同人群的核心诉求&#xff0c;提供对应的建站思路和工具选型建议&#xff0c;帮你精准定位&#xff0c;少走弯路。人…...

突破Cursor限制的5个实用技巧:从原理到实践

突破Cursor限制的5个实用技巧&#xff1a;从原理到实践 【免费下载链接】cursor-free-vip [Support 0.45]&#xff08;Multi Language 多语言&#xff09;自动注册 Cursor Ai &#xff0c;自动重置机器ID &#xff0c; 免费升级使用Pro 功能: Youve reached your trial request…...

重构缠论分析范式:四维动态识别引擎突破技术交易认知瓶颈

重构缠论分析范式&#xff1a;四维动态识别引擎突破技术交易认知瓶颈 【免费下载链接】Indicator 通达信缠论可视化分析插件 项目地址: https://gitcode.com/gh_mirrors/ind/Indicator 副标题&#xff1a;面向量化交易者的通达信可视化插件技术解析 揭示行业痛点&#…...

山东大学2022-2023学期实时绘制期末考试真题(回忆版)

山东大学2022年到2023年实时绘制期末考试 &#xff08;一共9到小题&#xff0c;每题10分或12分&#xff0c;包含多个小问&#xff0c;上午考完下午回忆写的&#xff0c;大体就这些&#xff0c;复习时还是应该全面一点。&#xff09; AABB包围盒构建过程&#xff1b;中间节点和叶…...

连锁经营行业商旅平台选型指南与测评排名Top 6:多门店与全链路商旅管控方案

2026年4月的第一周&#xff0c;艾美咨询发布了《2026年中国连锁经营行业商旅管理数字化白皮书》&#xff0c;数据显示国内规模以上连锁经营企业的商旅支出占整体运营成本的8.7%&#xff0c;其中私车公用、门店巡检类商旅的合规漏洞造成的浪费占总商旅支出的19.2%&#xff0c;连…...