如何使用 react hook form 和 yup 验证构建 react form：分步指南
介绍
react hook form 是一个强大的工具，可以简化 react 中的表单处理。与验证库 yup 结合使用，您可以轻松创建强大的、经过验证的表单。无论您是初学者还是只需要复习一下，本指南都将逐步引导您完成整个过程，并提供构建带有验证功能的有效登录表单所需的所有示例和说明。
为什么使用 react hook 表单？
react hook form 专注于提供最佳性能并减少不必要的重新渲染，使其成为其他表单库的轻量级替代品。当您为模式验证添加 yup 时，它会成为以干净且可扩展的方式处理复杂验证的强大工具。
主要特点：
- 使用最少的代码进行简单的表单处理。
- 内置验证支持。
- 减少重新渲染以提高性能。
- 与 yup 轻松集成以进行基于模式的验证。
让我们开始构建表单！
第1步：安装必要的软件包
开始编码之前，您需要安装所需的库：react-hook-form、@hookform/resolvers 和 yup。
在您的项目中运行以下命令：
npm install react-hook-form @hookform/resolvers yup
- react-hook-form：提供用于在 react 中处理表单的钩子。
- @hookform/resolvers：将 yup 与 react-hook-form 连接。
- 是的：用于值解析和验证的 javascript 模式构建器。
第 2 步：定义表单输入
创建将成为表单一部分的输入字段。对于基本的登录表单，我们有两个字段：电子邮件和密码。
输入接口示例：
// define the structure of form inputs
interface iforminput {
email?: string;
password?: string;
}
在这里，我们定义了一个接口 iforminput，其中包括电子邮件和密码的可选属性。该接口确保处理表单数据时的类型安全。
第 3 步：使用 yup 创建动态验证架构
为了进行验证，我们将使用 yup 为每个输入定义规则。您可以根据需要自定义此架构。下面介绍如何根据字段配置动态生成。
登录字段配置：
// configurations for each field's validation
export const signinfieldconfigs = {
email: {
type: "string",
required: "email is required",
matches: {
regex: /^[\w.-]+@[\w-]+\.[\w-]{2,4}$/,
message: "please enter a valid email address",
},
},
password: {
type: "string",
required: "password is required",
matches: {
regex:
/^(?=.*[a-z])(?=.*[a-z])(?=.*\d)(?=.*[@$!%*?&])[a-za-z\d@$!%*?&]{6,20}$/,
message: "password must contain at least one uppercase, one lowercase, one number, and one special character",
},
min: {
value: 6,
message: "password must be at least 6 characters",
},
max: {
value: 20,
message: "password must not exceed 20 characters",
},
},
};
这些配置定义电子邮件和密码字段的验证规则，例如正则表达式模式、必填字段和长度限制。
生成验证架构：
import * as yup from "yup";
export const generatevalidationschema = (fieldconfigs: any) => {
const shape: any = {};
object.keys(fieldconfigs).foreach((key) => {
const config = fieldconfigs[key];
let fieldschema = yup.string(); // default to string type
if (config.required) {
fieldschema = fieldschema.required(config.required);
}
if (config.matches && config.matches.regex) {
fieldschema = fieldschema.matches(config.matches.regex, config.matches.message);
}
if (config.min) {
fieldschema = fieldschema.min(config.min.value, config.min.message);
}
if (config.max) {
fieldschema = fieldschema.max(config.max.value, config.max.message);
}
shape[key] = fieldschema;
});
return yup.object().shape(shape);
};
这里，generatevalidationschema 函数根据为每个字段提供的配置动态创建 yup 模式。
第 4 步：设置 react hook 表单
现在，将react-hook-form与验证模式集成。
import { submithandler, useform } from "react-hook-form";
import { yupresolver } from "@hookform/resolvers/yup";
// create the form component
const signin = () => {
const validationschema = generatevalidationschema(signinfieldconfigs);
// initialize the form with useform hook
const {
register,
handlesubmit,
formstate: { errors },
} = useform({
resolver: yupresolver(validationschema),
});
// handle form submission
const onsubmit: submithandler = (data) => {
console.log(data);
};
return (
);
};
export default signin;
解释：
- useform 钩子使用解析器来初始化表单管理以进行验证。
- register 用于使用 react hook form 注册表单输入。
- handlesubmit 处理表单提交，当表单有效时调用 onsubmit 函数。
- 可以通过 formstate.errors 访问验证错误，如果验证失败，则会自动填充。
第 5 步：显示验证错误
在此步骤中，确保以用户可以理解的方式向用户显示任何验证错误。在这里，我们使用自定义组件 inputerror 来显示错误。
const inputerror = ({ error }: { error?: string }) => {
return error ? {error}
: null;
};
inputerror 组件只是获取错误消息并在存在时显示它。
第 6 步：添加 css 以获得更好的 ui
确保添加一些样式以改善用户体验：
.form-container {
max-width: 500px;
margin: auto;
padding: 2rem;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
input {
width: 100%;
padding: 0.8rem;
margin-bottom: 1rem;
border-radius: 4px;
border: 1px solid #ccc;
}
button {
width: 100%;
padding: 0.8rem;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
.error-text {
color: red;
font-size: 0.9rem;
}
第 7 步：测试表单
通过输入无效和有效数据来测试您的表单，以确保验证消息正确显示。例如：
- 如果您输入的电子邮件地址无效，则会出现“请输入有效的电子邮件地址”消息。
- 如果您输入的密码不符合条件，您会看到“密码必须包含至少一个大写字母、一个小写字母、一个数字和一个特殊字符。”
常见问题解答
如果验证失败会发生什么？
如果验证失败，formstate 内的错误对象将填充每个字段相应的错误消息。这些错误可以显示给用户。
我可以添加更多字段吗？
是的，您可以向表单添加更多字段并相应地更新验证架构。例如，您可以添加具有自己的验证规则的用户名字段。
结论
您现在已经使用react-hook-form和yup在react中成功创建了一个登录表单进行验证。该表单动态处理验证，并且可以轻松扩展以包含更多字段。通过遵循上述步骤，即使是初学者也可以轻松创建复杂的表单，并确保流畅的用户体验。
