当前位置：首页 > 文章列表 > 文章 > 前端 > 简化表单验证：React Hook 表单与传统方法

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

来源：dev.to 2024-07-30 22:12:48 0浏览收藏

推广推荐

支持 PC / 移动端，安全直达

一分耕耘，一分收获！既然打开了这篇文章《简化表单验证：React Hook 表单与传统方法》，就坚持看下去吧！文中内容包含等等知识点...希望你能在阅读本文后，能真真实实学到知识或者帮你解决心中的疑惑，也欢迎大佬或者新人朋友们多留言评论，多给建议！谢谢！

表单验证是 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-z\d@$!%*?&]{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 (
    <form onsubmit={handlesubmit}>
      &lt;input
        name=&quot;firstname&quot;
        value={formdata.firstname}
        onchange={handlechange}
      /&gt;
      {errors.firstname && <p>{errors.firstname}</p>}

      &lt;input
        name=&quot;lastname&quot;
        value={formdata.lastname}
        onchange={handlechange}
      /&gt;
      {errors.lastname && <p>{errors.lastname}</p>}      

      &lt;input
        name=&quot;email&quot;
        value={formdata.email}
        onchange={handlechange}
      /&gt;
      {errors.email && <p>{errors.email}</p>}


      &lt;input
        type=&quot;password&quot;
        name=&quot;password&quot;
        value={formdata.password}
        onchange={handlechange}
      /&gt;
      {errors.password && <p>{errors.password}</p>}

      {/* more form fields */}

      <button type="submit" disabled={issubmitting}>
        {issubmitting ? "submitting..." : "submit"}
      </button>
    </form>
  );
};

采用这种传统方法

我们使用 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-form
import { 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 (
    <form onSubmit={handleSubmit(onSubmit)}>
      &lt;input
        {...register(&quot;firstName&quot;, { required: &quot;First Name is required&quot; 
        })}
      /&gt;

      {errors.firstName && <p>{errors.firstName.message}</p>}

      &lt;input
        {...register(&quot;lastName&quot;, { required: &quot;Last Name is required&quot; 
        })}
      /&gt;

      {errors.lasttName && <p>{errors.lasttName.message}</p>}      

      &lt;input
        {...register(&quot;email&quot;, {
          required: &quot;Email is required&quot;,
          pattern: { value: /^\S+@\S+$/i, message: &quot;Invalid email address&quot; }
        })}
      /&gt;

      {errors.email && <p>{errors.email.message}</p>}

      &lt;input
        {...register(&quot;password&quot;, { required: &quot;First Name is required&quot;,
         pattern: { value: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&amp;])[A-Za-z\d@$!%*?&amp;]{8,}$/, message: &quot;Invalid password&quot;}
        })}
      /&gt;

      {errors.firstName && <p>{errors.firstName.message}</p>}      

      {/* More form fields */}

      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? "Submitting..." : "Submit"}
      </button>

    </form>
  );
};

react hook form 的简单性