首頁 > web前端 > js教程 > 主體

簡化表單驗證:React Hook 表單與傳統方法

WBOY
發布: 2024-07-31 00:39:53
原創
852 人瀏覽過

Simplifying Form Validation: React Hook Form vs Traditional Methods

表單驗證是 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}>
      <input
        name="firstName"
        value={formData.firstName}
        onChange={handleChange}
      />
      {errors.firstName && <p>{errors.firstName}</p>}

      <input
        name="lastName"
        value={formData.lastName}
        onChange={handleChange}
      />
      {errors.lastName && <p>{errors.lastName}</p>}      

      <input
        name="email"
        value={formData.email}
        onChange={handleChange}
      />
      {errors.email && <p>{errors.email}</p>}


      <input
        type="password"
        name="password"
        value={formData.password}
        onChange={handleChange}
      />
      {errors.password && <p>{errors.password}</p>}

      {/* More form fields */}

      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? "Submitting..." : "Submit"}
      </button>
    </form>
  );
};
登入後複製

採用此傳統方法

  • 我們使用 useState 鉤子分別管理表單狀態和錯誤狀態。
  • 我們手動處理表單欄位的變更並在handleSubmit函數中實作自訂驗證邏輯。

雖然這有效,但它涉及大量樣板程式碼,對於較大的表單可能會變得很麻煩。

輸入 React Hook 表單

  • 現在,讓我們看看如何使用 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)}>
      <input
        {...register("firstName", { required: "First Name is required" 
        })}
      />

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

      <input
        {...register("lastName", { required: "Last Name is required" 
        })}
      />

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

      <input
        {...register("email", {
          required: "Email is required",
          pattern: { value: /^\S+@\S+$/i, message: "Invalid email address" }
        })}
      />

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

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

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

      {/* More form fields */}

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

    </form>
  );
};
登入後複製

React Hook 表單的簡單性

  • 減少樣板: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 顯著簡化了這個過程,提供了一種更具聲明性和更有效的方式來處理表單及其驗證。

謝謝您的閱讀...希望您今天學到新東西:)

以上是簡化表單驗證:React Hook 表單與傳統方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板