概要

大家好，我是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'),], '两次密码输入不一致'),
});

1. 首先，我们使用 object() 将输入表单的输入值定义为对象。 接下来，使用 shape() 指定具体的数据格式要求。
2. 使用 required() ，则该字段为必填字段。
3. 使用 email() ，则该字段必须采用电子邮件地址的形式。
4. 使用 matches() ， 则该字段必须符合您自己定义的正则表达式。
5. 使用 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