简化表单验证：React Hook 表单与传统方法

PHP中文网 • 2025年3月7日 13:23:36 • 编程技术 • 阅读 2

表单验证是 web 开发的一个重要方面，可确保数据完整性并增强用户体验。在 react 生态系统中，我们看到了处理表单及其验证方式的重大演变。

在本博客中，我们将比较两种方法：传统表单验证和现代 react hook 表单库。通过并排检查这些方法，我们将发现为什么 react hook form 已成为许多开发人员的首选解决方案。

react 中的传统表单验证

让我们首先看看 react 中表单验证的传统方法：

import react, { usestate } from "react";const simpleform = () => {  const [formdata, setformdata] = usestate({    firstname: "",    lastname: "",    email: "",    password: "",    // ... other fields  });  const [errors, seterrors] = usestate({});  const [issubmitting, setissubmitting] = usestate(false);  const handlechange = (e) => {    const { name, value } = e.target;    setformdata({      ...formdata,      [name]: value,    });  };  const handlesubmit = (e) => {    e.preventdefault();    setissubmitting(true);    const newerrors = {};    // validation logic    if (!formdata.firstname) newerrors.firstname = "first name is required";    if (!formdata.lastname) newerrors.lastname = "last name is required";    if (!formdata.email.match(/^s+@s+$/i)) newerrors.email = "invalid email address";    if (!formdata.password.match(/^(?=.*[a-z])(?=.*[a-z])(?=.*d)(?=.*[@$!%*?&])[a-za-zd@$!%*?&]{8,}$/)) newerrors.password = "invalid password";    // ... more validation rules    if (object.keys(newerrors).length > 0) {      seterrors(newerrors);      return;    }    // submit form data    try {      const response = await simulateapicall(formdata);      console.log("success: ", response);    } catch (error) {      console.error(error);      seterror({ root: error.message });    } finally {      setissubmitting(false)    }  };  return (                {errors.firstname && {errors.firstname}
}            {errors.lastname && {errors.lastname}
}                  {errors.email && {errors.email}
}            {errors.password && {errors.password}
}      {/* more form fields */}            );};

登录后复制

采用这种传统方法

我们使用 usestate 钩子分别管理表单状态和错误状态。我们手动处理表单字段的更改并在handlesubmit函数中实现自定义验证逻辑。

虽然这可行，但它涉及大量样板代码，对于较大的表单可能会变得很麻烦。

输入react hook form

现在，让我们看看如何使用 react hook form 实现相同的结果：

安装

npm install react-hook-form

登录后复制

import React from "react";// useForm is the hook which is given by react-hook-formimport { useForm } from "react-hook-form";const ReactHookForm = () => {  const {    register,    handleSubmit,    setError,    formState: { errors, isSubmitting },  } = useForm();  const onSubmit = (data) => {    // Submit form data    try {      const response = await simulateApiCall(formData);      console.log("Success: ", response);    } catch (error) {      console.error(error);      setError({ root: error.message });    }  };  return (                {errors.firstName && {errors.firstName.message}
}            {errors.lasttName && {errors.lasttName.message}
}                  {errors.email && {errors.email.message}
}            {errors.firstName && {errors.firstName.message}
}            {/* More form fields */}            );};

登录后复制

react hook form 的简单性

减少样板：react hook form 消除了手动状态管理的需要。表单数据和错误不再使用 usestate。

声明式验证：我们不编写命令式验证逻辑，而是在寄存器函数中声明验证规则。这使得代码更具可读性和可维护性。

自动错误处理：react hook form 自动跟踪错误并通过错误对象提供错误，无需手动进行错误状态管理。

性能：通过利用不受控制的组件，react hook form 最大限度地减少了重新渲染，从而带来更好的性能，特别是对于大型表单。

轻松集成：注册功能与您现有的输入元素无缝集成，只需对 jsx 进行最少的更改。

内置验证：内置了常见的验证规则，如 required、min、max、pattern，减少了对自定义验证函数的需求。

typescript 支持：react hook form 提供了出色的开箱即用的 typescript 支持，增强了表单中的类型安全性。

了解如何在具有更多输入字段的打字稿中处理react-hook-form

虽然 react 中的传统表单处理为您提供了细粒度的控制，但它通常会导致难以维护的冗长代码。

react hook form 显着简化了这个过程，提供了一种更具声明性和更有效的方式来处理表单及其验证。