React Hook Form kết hợp Zod: Bộ đôi xử lý Form Validation chuẩn Type Safety 100%

Xử lý biểu mẫu (Form handling) và kiểm tra tính hợp lệ dữ liệu (Validation) luôn là ác mộng của các lập trình viên Front-end nếu phải dùng useState thủ công. Sự kết hợp giữa React Hook Form (Thư viện Form hiệu năng cao) và Zod (Thư viện định nghĩa Schema Type-safe) tạo nên bộ đôi hoàn hảo xử lý Form mượt mà nhất hiện nay!

1. Tại sao React Hook Form + Zod là bộ đôi vô địch?

• Không làm re-render thừa: React Hook Form sử dụng cơ chế Uncontrolled Component kết hợp Ref, giúp gõ phím vào ô Input mà KHÔNG làm re-render toàn bộ trang.
• Viết Schema 1 lần - Dùng cả Client lẫn Server: Khai báo Zod Schema kiểm tra độ dài email, định dạng số điện thoại một lần, dùng được cho cả Form giao diện lẫn Server Actions.
• Tự động suy luận TypeScript Type (z.infer): Không cần gõ lại kiểu dữ liệu interface thủ công.

2. Viết Form Validation hoàn chỉnh với Zod & React Hook Form

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';

// 1. Định nghĩa Zod Schema
const contactSchema = z.object({
  name: z.string().min(2, 'Họ tên phải có ít nhất 2 ký tự'),
  email: z.string().email('Email không đúng định dạng'),
  phone: z.string().regex(/^0[0-9]{9}$/, 'Số điện thoại phải gồm 10 chữ số'),
});

export default function ContactForm() {
  const { register, handleSubmit, formState: { errors } } = useForm({
    resolver: zodResolver(contactSchema),
  });

  const onSubmit = (data) => console.log('Dữ liệu hợp lệ:', data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('name')} placeholder="Họ tên" />
      {errors.name && <p className="error">{errors.name.message}</p>}

      <input {...register('email')} placeholder="Email" />
      {errors.email && <p className="error">{errors.email.message}</p>}

      <button type="submit">Gửi thông tin</button>
    </form>
  );
}

Kết luận

Áp dụng React Hook Form + Zod giúp biểu mẫu của bạn chạy mượt mà và an toàn dữ liệu tuyệt đối. Uwmee Software chuẩn hóa 100% các biểu mẫu website Next.js bằng bộ đôi React Hook Form và Zod. Đọc thêm bài viết thiết kế Form chuẩn UX.