表單驗證是 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 Hook 表單與傳統方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
