- React Hook Form giúp đơn giản hóa việc quản lý form trong React, giảm thiểu việc re-render và cải thiện hiệu suất. Thư viện này sử dụng các hook để quản lý state của form một cách dễ dàng và trực quan.
- Yup là thư viện xác thực dữ liệu với khả năng xây dựng schema một cách linh hoạt. Bạn có thể dễ dàng định nghĩa các quy tắc kiểm tra tính hợp lệ cho từng field trong form.
2. Cài đặt
Để bắt đầu, cài đặt các thư viện :
npm install <a href="https://fstack.io.vn/blog/react-hook-form-1-giai-phap-hieu-qua-de-quan-ly-form/">react-hook-form</a> yup @hookform/resolvers
- react-hook-form: thư viện chính để quản lý form.
- yup: thư viện xác thực.
- @hookform/resolvers: giúp tích hợp Yup với React Hook Form.
3. Tạo Form với React Hook Form
Hãy cùng tạo một form đăng ký đơn giản với các trường thông tin: name, email, và password. Chúng ta sẽ sử dụng React Hook Form để quản lý state của form và Yup để xác thực các giá trị nhập vào.
3.1. Định nghĩa Schema
// validationSchema.js
import * as yup from 'yup';
export const schema = yup.object().shape({
name: yup.string().required('Name is required'),
email: yup.string().email('Invalid email format').required('Email is required'),
password: yup
.string()
.min(6, 'Password must be at least 6 characters')
.required('Password is required'),
});
- yup.object().shape(...): Tạo một schema Yup với các trường và quy tắc xác thực
- name: yup.string().required('Name is required'): Trường name phải là một chuỗi và không được để trống. Nếu không hợp lệ, thông báo lỗi "Name is required" sẽ hiển thị.
- email: yup.string().email('Invalid email format').required('Email is required'): Trường email phải là một chuỗi có định dạng email hợp lệ và không được để trống.
- password: yup.string().min(6, 'Password must be at least 6 characters').required('Password is required'): Trường password phải là một chuỗi với ít nhất 6 ký tự và không được để trống.
3.2. Tạo Component RegisterForm
Trong component RegisterForm, chúng ta sử dụng React Hook Form để quản lý form và tích hợp Yup để xác thực dữ liệu.
import React from 'react';
import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import { schema } from './validationSchema';
import './styles.css'; // Import file CSS để cải thiện <a href="https://fstack.io.vn/blog/du-an/">giao diện</a>
const RegisterForm = () => {
const { register, handleSubmit, formState: { errors } } = useForm({
resolver: yupResolver(schema),
});
const onSubmit = (data) => {
alert('Registration Successful');
console.log('Form data:', data);
};
return (
<form onSubmit={handleSubmit(onSubmit)}>
<div>
<label>Name:</label>
<input {...register('name')} />
{errors.name && <p className="error-message">{errors.name.message}</p>}
</div>
<div>
<label>Email:</label>
<input {...register('email')} />
{errors.email && <p className="error-message">{errors.email.message}</p>}
</div>
<div>
<label>Password:</label>
<input type="password" {...register('password')} />
{errors.password && <p className="error-message">{errors.password.message}</p>}
</div>
<button type="submit">Register</button>
</form>
);
};
export default RegisterForm;
4. Giải thích từng phần
4.1.Khai báo thư viện và schema:
- useForm từ react-hook-form được sử dụng để khởi tạo form.
- yupResolver giúp tích hợp Yup với React Hook Form để tự động kiểm tra tính hợp lệ dựa trên schema đã định nghĩa.
- schema được import từ validationSchema.js để áp dụng các quy tắc xác thực.
4.2.useFoem Hook:
const { register, handleSubmit, formState: { errors } } = useForm({
resolver: yupResolver(schema),
});
- register: Được sử dụng để đăng ký các trường nhập liệu trong form.
- handleSubmit: Là hàm xử lý khi form được submit, trong đó kết hợp với hàm onSubmit.
- formState.errors: Chứa thông tin lỗi của từng trường khi không hợp lệ, giúp hiển thị thông báo lỗi.
- resolver: yupResolver(schema): Cho phép sử dụng Yup để kiểm tra tính hợp lệ của form.
4.3.onSubmit Handler:
const onSubmit = (data) => {
alert('Registration Successful');
console.log('Form data:', data);
};
onSubmit là hàm xử lý khi form hợp lệ và được submit thành công. Dữ liệu sẽ được in ra console và hiển thị thông báo thành công.
4.4. Giao diện form
<form onSubmit={handleSubmit(onSubmit)}>
<div>
<label>Name:</label>
<input {...register('name')} />
{errors.name && <p className="error-message">{errors.name.message}</p>}
</div>
<div>
<label>Email:</label>
<input {...register('email')} />
{errors.email && <p className="error-message">{errors.email.message}</p>}
</div>
<div>
<label>Password:</label>
<input type="password" {...register('password')} />
{errors.password && <p className="error-message">{errors.password.message}</p>}
</div>
<button type="submit">Register</button>
</form>
- <input {...register('name')} />: Sử dụng register để liên kết input với form. Điều này cho phép React Hook Form kiểm soát giá trị của trường và theo dõi trạng thái.
-
{errors.name &&
{errors.name && <p className="error-message">{errors.name.message}</p>}: Hiển thị thông báo lỗi nếu có lỗi xác thực xảy ra đối với trường name. Cách làm tương tự với các trường email và password.
5. Kết luận
- React Hook Form và Yup là sự kết hợp tuyệt vời giúp quản lý form hiệu quả trong React
- Bằng cách tích hợp Yup, bạn có thể dễ dàng áp dụng các quy tắc xác thực một cách linh hoạt và đơn giản.
Ở trên là 1 số chia sẻ về cách kết hợp giữa react hook form và Yup của mình, vì đây đa phần là kiến thức mình tự học nên có thể bài viết này có thể có nhiều chỗ chưa chính xác và thiếu sót, mong mọi người góp ý ở dưới phần bình luận để bài viết thêm hoàn chỉnh và xây dựng một cộng đồng nơi mọi người có thể chia sẻ kinh nghiệm lập trình cho nhau 😘.
By
By
