Page Reader AI | 详解React Hook Form 和 Yup 实现输入表单的验证

详解React Hook Form 和 Yup 实现输入表单的验证_react yup-CSDN博客

AI Summary Hide AI Generated Summary

Overview

This tutorial explains how to use React Hook Form and Yup for input form validation in React applications. It leverages the strengths of both libraries to efficiently handle even complex forms.

Development Environment

The guide specifies a development environment including: Windows 10+, Next.js 14.0.4, React 19, Sass 1.83.7, React Hook Form 7.54.2, @hookform/resolvers 3.9.1, Yup 1.6.1, and Visual Studio Code 1.84.1.

Prerequisites

It assumes familiarity with Next.js project setup; the tutorial doesn't cover Next.js environment setup.

Installing Necessary Libraries

The article details installing React Hook Form, Yup, and @hookform/resolvers via npm.

Library Introductions

React Hook Form: A React Hooks-based form library simplifying form state management and validation. It's known for its performance, lightweight nature, and ease of extension.
Yup: A powerful JavaScript object schema validation library used for declarative data structure validation. It's compatible with various frameworks.
@hookform/resolvers: Acts as a bridge to integrate React Hook Form with Yup for validation.

Using Yup for Form Validation

The tutorial demonstrates creating a Yup schema for validation, using methods like required(), email(), matches(), and oneOf() with yup.ref() for password confirmation.

It also shows how to use min() and max() for character limits and provides a link to the Yup GitHub for further validation methods.

A code snippet shows a sample user registration form implementation, though the full implementation isn't fully included in this excerpt.

概要

大家好，我是Alex独开。在本文中，我们总结了如何使用 React Hook Form 和 Yup 实现输入表单的验证。通过结合 React Hook Form 和 Yup，即使表单中的输入项很多或验证项很复杂，也可以非常方便高效地实现。如果你正在考虑使用 React Hook Form 和 Yup，或者你已经阅读了官方文档但不知道如何使用它，请参考这篇文章。

开发环境

Windows10+
Next.js 14.0.4
React 19
Sass 1.83.7
React Hook Form 7.54.2
@hookform/resolvers 3.9.1
Yup 1.6.1
Visual Studio Code 1.84.1

前提

这里假设你已经使用 Next.js 创建完成了项目在这里我们不会讨论如何使用 Next.js构建环境。

安装必要的库

在您创建的 Next.js 项目中，需要添加以下三个库

React Hook Form
Yup
@hookform/resolvers

安装的执行命令，请参阅以下内容。

//TERMINAL
npm install react-hook-form yup @hookform/resolvers

接下来我们先简单介绍一下每个库。

React Hook Form ‌React Hook Form‌ 是一个基于React Hooks的表单库，旨在通过提供一系列的钩子（Hooks）来简化表单状态管理和验证。它具有高性能、轻量级、易于扩展和校验的特点，能够显著减少代码量，提高代码的可读性和可维护性‌。
Yup Yup‌是一个功能强大且易用的JavaScript对象模式验证库，主要用于数据验证。它以声明式的方式对数据结构进行验证，广泛应用于React、Vue等前端框架以及其他JavaScript应用中。虽然我们也可以使用React Hook Form 实现表单的验证，但是Yup允许我们设置各种验证规则，例如必须输入检查和正则表达式检查。
@hookform/resolvers React Hook Form与外部验证库Yup结合使用的时候必须使用@hookform/resolvers作为纽带

使用 Yup 实现表单验证

首先，使用Yup 实现表单验证先把表单验证的所有代码都复制出来


import * as yup from 'yup';
const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/;
export const schema = yup.object().shape({
   
  fullName: yup.string().required("请输入名称"),
  email: yup.string().email("邮箱格式不正确").required("请输入邮箱"),
  password: yup.string().required("请输入密码").min(8).matches(passwordRegex, "密码包含非法字符"),
  confirmPassword: yup.string().required("请再次输入密码").oneOf([yup.ref('password'),], '两次密码输入不一致'),
});

首先，我们使用 object() 将输入表单的输入值定义为对象。接下来，使用 shape() 指定具体的数据格式要求。
使用 required() ，则该字段为必填字段。
使用 email() ，则该字段必须采用电子邮件地址的形式。
使用 matches() ，则该字段必须符合您自己定义的正则表达式。
使用 oneOf() ，则该字段必须与您指定项目的数值匹配。在本例中，我们结合Yup.ref()使用，以验证它是否与密码的值匹配。

此外，您还可以使用 min() 和 max() 限制输入的字符数。这里不对所有的验证方法进行一一介绍，大家请参阅 Yup 的 GitHub查看详细内容。

用户注册界面的实现

//\app\components\input\input.module.scss
.formWrapper {
   
  display: flex;
  flex-direction: column;
  text-align: center;
  margin:0 auto;
  padding-left: 10%;
  padding-right: 10%;
}
.formItemWrapper{
   
  display: flex;
  flex-direction: column;
  text-align: start;
  padding: 24px 0;
}
.formErrorMessage{
   
  text-align