当前位置：首页 > 文章列表 > 文章 > 前端 > 从零到英雄：使用 React Hook Form 构建带有验证的 React Form 是的

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

来源：dev.to 2024-10-18 19:36:59 0浏览收藏

有志者，事竟成！如果你在学习文章，那么本文《从零到英雄：使用 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 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 (
    
      
        {/* 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;
}