如何使用 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 inputsinterface iforminput { email?: string; password?: string;}
在这里，我们定义了一个接口 iforminput，其中包括电子邮件和密码的可选属性。该接口确保处理表单数据时的类型安全。
第 3 步：使用 yup 创建动态验证架构
为了进行验证，我们将使用 yup 为每个输入定义规则。您可以根据需要自定义此架构。下面介绍如何根据字段配置动态生成。
登录字段配置：
// configurations for each field's validationexport 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-zd@$!%*?&]{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 componentconst 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 ( {/* email field */} {errors.email && {errors.email.message}
} {/* password field */} {errors.password && {errors.password.message}
} {/* submit button */} );};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中成功创建了一个登录表单进行验证。该表单动态处理验证，并且可以轻松扩展以包含更多字段。通过遵循上述步骤，即使是初学者也可以轻松创建复杂的表单，并确保流畅的用户体验。
以上就是从零到英雄：使用 React Hook Form 构建带有验证的 React Form 是的的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1493379.html
微信扫一扫 
支付宝扫一扫 
