العودة للمقالات

ارتقِ بمستويات نماذج React الخاصة بك مع React Hook Form و Zod Validation

Majd Muhtaseb08‏/06‏/20257 دقيقة

مقدمة

يُعد التحقق من صحة النماذج أمرًا بالغ الأهمية لأي تطبيق ويب. في حين أن React تقدم العديد من مكتبات النماذج، تبرز React Hook Form لأدائها وسهولة استخدامها. إن الجمع بينها وبين Zod، وهي مكتبة للتحقق من صحة المخططات تعتمد على TypeScript في المقام الأول، يمنحك التحقق من الصحة الآمن من النوع والقوي.

لماذا React Hook Form و Zod؟

• React Hook Form: عمليات إعادة عرض بسيطة، وسهلة الدمج، وعالية الأداء.
• Zod: يعتمد على TypeScript في المقام الأول، وتعريف مخطط إعلاني، ومعالجة ممتازة للأخطاء.

إعداد المشروع

أولاً، قم بإنشاء مشروع React جديد (إذا لم يكن لديك مشروع بالفعل):

npx create-react-app my-form-app
cd my-form-app

ثم قم بتثبيت الحزم الضرورية:

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

تحديد المخطط باستخدام Zod

دعنا نحدد مخطط نموذج بسيط لنموذج تسجيل المستخدم:

import * as z from "zod";

const userSchema = z.object({
  firstName: z.string().min(2, { message: "يجب أن يتكون الاسم الأول من حرفين على الأقل." }),
  lastName: z.string().min(2, { message: "يجب أن يتكون الاسم الأخير من حرفين على الأقل." }),
  email: z.string().email({ message: "عنوان بريد إلكتروني غير صالح." }),
  password: z.string().min(8, { message: "يجب أن تتكون كلمة المرور من 8 أحرف على الأقل." }),
  confirmPassword: z.string(),
}).refine((data) => data.password === data.confirmPassword, {
  message: "كلمات المرور غير متطابقة",
  path: ["confirmPassword"], // مسار الخطأ
});

export type UserSchemaType = z.infer<typeof userSchema>;

يحدد هذا المخطط بنية بيانات النموذج الخاصة بنا ويحدد قواعد التحقق من الصحة لكل حقل. تضيف الطريقة refine تحققًا مخصصًا للتأكد من تطابق حقلي كلمة المرور وتأكيد كلمة المرور.

تنفيذ النموذج باستخدام React Hook Form

الآن، دعونا ننشئ مكون React باستخدام React Hook Form و Zod resolver:

import React from 'react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import * as z from "zod";
import {userSchema, UserSchemaType} from './schema';

const RegistrationForm = () => {
  const { register, handleSubmit, formState: { errors } } = useForm<UserSchemaType>({
    resolver: zodResolver(userSchema),
    defaultValues: {
      firstName: "",
      lastName: "",
      email: "",
      password: "",
      confirmPassword: "",
    }
  });

  const onSubmit = (data: UserSchemaType) => {
    console.log("بيانات النموذج:", data);
    alert(JSON.stringify(data)); // استبدل بمنطق الإرسال الفعلي الخاص بك
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label htmlFor="firstName">الاسم الأول:</label>
        <input type="text" id="firstName" {...register("firstName")} />
        {errors.firstName && <p>{errors.firstName.message}</p>}
      </div>

      <div>
        <label htmlFor="lastName">الاسم الأخير:</label>
        <input type="text" id="lastName" {...register("lastName")} />
        {errors.lastName && <p>{errors.lastName.message}</p>}
      </div>

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

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

       <div>
        <label htmlFor="confirmPassword">تأكيد كلمة المرور:</label>
        <input type="password" id="confirmPassword" {...register("confirmPassword")} />
        {errors.confirmPassword && <p>{errors.confirmPassword.message}</p>}
      </div>

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

export default RegistrationForm;

النقاط الرئيسية:

• تهيئة useForm النموذج وتوفر طرقًا لإدارة حالة النموذج والتحقق من صحته.
• zodResolver يربط React Hook Form بمخطط Zod الخاص بنا.
• يتم استخدام الدالة register لتسجيل حقول الإدخال وتوصيلها بحالة النموذج.
• formState.errors يحتوي على أخطاء التحقق من الصحة من Zod.

خاتمة

يوفر React Hook Form و Zod مزيجًا قويًا لبناء نماذج قوية وآمنة من النوع في React. يبسط هذا النهج التحقق من صحة النموذج، ويحسن جودة التعليمات البرمجية، ويعزز تجربة المستخدم.