يا هلا بيك يا بشمهندس في عالم تطوير الويب (Web Development). تعال نتكلم في نقطة أكيد وجعت دماغك في أي مشروع ريأكت (React) اشتغلت عليه: بناء النماذج (Forms) والتحقق من صحة البيانات (Validation). زمان، كنا بنقعد نكتب شروط (If Statements) بالهبل عشان نتاكد إن الإيميل صح والباسورد مش قصير، وطبعاً الكود كان بيبقى سباغتي (Spaghetti Code) وصعب جداً نعمل له صيانة.

في المقال ده، هناخد رحلة عملية خطوة بخطوة عشان نفهم إزاي نعمل (Validation) محكم وخفيف على القلب والعقل، يخلي الكود بتاعك نظيف وآمن ومريح جداً للعين.

إيه هي مكتبة Zod ولي هي اختيارنا الأول للتحقق من البيانات؟

مكتبة (Zod) هي باحثة عن الكمال في عالم جافاسكريبت وتايب سكريبت. هي باختصار عبارة عن مكتبة للتحقق من الأنواع (Schema Validation) بتسمح لك توصف شكل البيانات (Data Shape) بطريقة سهلة جداً. الجميل في (Zod) إنها بتوفر لك أمان الأنواع (Type Safety) بدون ما تحتاج تكتب كود تايب سكريبت معقد بنفسك، لأنها بتستنتج الأنواع دي لوحدها (Type Inference).

لما ندمج (Zod) مع (React Hook Form)، إحنا بناخد أحسن ما في العالمين: أداء عالي جداً لأن (React Hook Form) مش بتعمل (Re-render) لكل الصفحة مع كل حرف تكتبه، ومعاها (Zod) اللي بتضمن إن مافيش أي داتا مضروبة تدخل على السيرفر بتاعك.

تثبيت الأدوات المطلوبة والبدء في المشروع

قبل ما نكتب سطر كود واحد، لازم ننزل الحزم (Packages) اللي هنحتاجها. افتح التيرمينال (Terminal) بتاعتك ونفذ الأمر ده:

npm install react-hook-form zod @hookform/resolvers

الحزمة السحرية هنا هي (@hookform/resolvers)؛ دي الجسر أو الوصلة اللي بتخلي (React Hook Form) تفهم وتتعامل مع قواعد الـ (Zod Schema) بكل سلاسة.

بناء مخطط التحقق باستخدام Zod Schema

تعال نعمل مثال عملي لصفحة تسجيل مستخدم جديد (Sign Up Form). أول حاجة هنعملها هي تعريف شكل البيانات ور,والقواعد بتاعتها باستخدام (Zod).

import { z } from "zod";

const signUpSchema = z.object({
  username: z.string().min(3, "اسم المستخدم لازم يكون 3 حروف على الأقل"),
  email: z.string().email("البريد الإلكتروني غير صالح"),
  password: z.string().min(6, "كلمة المرور لازم تكون 6 خانات على الأقل"),
});

type SignUpFormValues = z.infer;

لاحظ هنا الجمال! عرفنا الـ (Schema) وبعدين استنتجنا نوع البيانات (TypeScript Type) في سطر واحد باستخدام z.infer. ده هيخلي الأوتو-كيمبليت (Auto-complete) يشتغل معاك جوة الكومبوننت بشكل يبهر.

ربط Zod مع React Hook Form وعرض الأخطاء

دلوقتى جه وقت الشغل الثقيل؛ هنستخدم المخطط اللي عملناه جوة مكون ريأكت (React Component) ونربطه بـ (React Hook Form) باستخدام الـ (Resolver).

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

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

  const onSubmit = (data) => {
    console.log("البيانات سليمان وتم إرسالها بنجاح:", data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label>اسم المستخدم</label>
        <input {...register("username")} />
        {errors.username && <p style={{color: "red"}}>{errors.username.message}</p>}
      </div>

      <div>
        <label>البريد الإلكتروني</label>
        <input {...register("email")} />
        {errors.email && <p style={{color: "red"}}>{errors.email.message}</p>}
      </div>

      <div>
        <label>كلمة المرور</label>
        <input type="password" {...register("password")} />
        {errors.password && <p style={{color: "red"}}>{errors.password.message}</p>}
      </div>

      <button type="submit">تسجيل</button>
    </form>
  );
}

الكود ده بيكلمنا عن نفسه! الـ (register) بتربط الحقول بالمكتبة، و الـ (handleSubmit) مش بتنفذ دالة الإرسال إلا لو كل شروط الـ (Zod Schema) اتحققت بنسبة مية في المية.

نصيحة من أخوك الكبير لتطوير مستواك

عشان تكون مبرفر (Professional Developer) حقيقي، متقفش لحد التحقق البسيط. (Zod) فيها إمكانيات مرعبة زي التحقق المتقدم (Refine) اللي بيخليك تعمل شروط مركبة، زي مثلاً التأكد إن حقل "تأكيد كلمة المرور" مطابقة لحقل "كلمة المرور". جرب دايماً تقرأ الـ Documentation الرسمية بتاعة المكتبتين دول، لأنهم بيطوروا من نفسهم بسرعة وعشان تكتشف الحيل الجديدة اللي بتوفر عليك ساعات من كتابة الكود المكرر. بالتوفيق يا وحش الكودينج!