从零到英雄：使用 React Hook Form 构建带有验证的 React Form 是的

如何使用 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 */}        sign in          
  );};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 是的的详细内容，更多请关注【创想鸟】其它相关文章！