1. Giới thiệu

• Data Validation (xác thực dữ liệu) là bước quan trọng giúp đảm bảo dữ liệu người dùng nhập vào hệ thống là hợp lệ, nhất quán và an toàn trước khi lưu trữ hoặc xử lý. Trong dự án quản lý sinh viên, xác thực dữ liệu giúp ngăn chặn lỗi logic, bảo vệ hệ thống khỏi dữ liệu không hợp lệ hoặc độc hại, đồng thời nâng cao trải nghiệm người dùng.
• Trong dự án này, cơ chế xác thực dữ liệu được triển khai ở cả frontend (Next.js) và backend (Node.js/Express), giúp kiểm soát chất lượng dữ liệu xuyên suốt quá trình xử lý.

2. Data Validation ở frontend (Next.js/React)

2.1. Tổng quan

Ở phía Frontend, xác thực dữ liệu được thực hiện trực tiếp trên trình duyệt, giúp phát hiện lỗi sớm và cung cấp phản hồi tức thì cho người dùng. Với dự án này thường được thực hiện bằng thư viện zod kết hợp với các thư viện quản lý form như React Hook Form.

2.2. Ví dụ sử dụng Zod với React Hook Form

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

const schema = z.object({
  id: z.string()
    .regex(/^\\d{8}$/, { message: "Mã sinh viên phải gồm 8 chữ số" })
    .nonempty("Bắt buộc nhập mã sinh viên"),
  fullName: z.string()
    .max(100, "Tên không quá 100 ký tự")
    .nonempty("Bắt buộc nhập họ tên"),
  dateOfBirth: z.coerce.date({ required_error: "Bắt buộc nhập ngày sinh" }),
  // ... các trường khác
});

export default function StudentForm() {
  const { register, handleSubmit, formState: { errors } } = useForm<z.infer<typeof schema>>({
    resolver: zodResolver(schema)
  });

  // ...existing code...
}

Giải thích:

• schema: Định nghĩa các quy tắc kiểm tra dữ liệu cho từng trường.
• useForm + zodResolver: Kết hợp React Hook Form với Yup để tự động kiểm tra dữ liệu khi người dùng nhập.
• Khi người dùng nhập sai, thông báo lỗi sẽ hiển thị ngay dưới trường nhập liệu.
• Khi submit hợp lệ, dữ liệu sẽ được xử lý tiếp (ví dụ: gửi lên backend).

2.3. Ưu điểm

• Phản hồi lỗi ngay lập tức cho người dùng.
• Giảm số lượng request không hợp lệ gửi lên server.
• Cải thiện trải nghiệm người dùng.

Lưu ý: Validation ở frontend chỉ hỗ trợ, không thay thế cho validation ở backend.