Form Validation التحقّق من النماذج
آخر تحديث: 2026-11-03
Form Validation التحقّق من النماذج
جوهر التحقّق هو استخراج الأخطاء من الحالة: دالة تحقّق تحسب كائن أخطاء، ويُفحص الكائن كله مرة واحدة قبل الإرسال، فإذا كان هناك خطأ يُمنع الإرسال ويُعرض رسالة الخطأ. ورسائل الخطأ واجهة أيضاً، فالعرض الشرطي يكفي — ولا يلزم أي عمل إلزامي على DOM. ولأن الأخطاء تُحسب أثناء العرض، لا يمكن أن تنحرف عن الحقول التي تصفها، وهذا يُزيل فئة كاملة من خلل رسائل التحقّب القديمة.
| المجموعة | أنماط المكونات |
|---|---|
| النوع | نمط |
ℹ️ ملاحظة يحوّل المحرّر JSX إلى JavaScript ويعرض الواجهة الحقيقية داخل بيئة معزولة؛ تُركَّب المكوّنات تلقائياً دون استدعاء render يدوي.
📝 الصيغة
const errors = validate(values) // استخرج الأخطاء من الحالة
const hasError = Object.keys(errors).length > 0
<form onSubmit={e => {
e.preventDefault() // أوقف الإرسال الافتراضي للمتصفح
if (!hasError) submit(values)
}}>القيمة المرجعة：لا قيمة معادة؛ فهذه المدخلات تصف نمط برمجة لا دالة.
▶ مثال
المثال يعمل مباشرة: يُعرض تلقائياً عند التوسيع وتظهر التعديلات فوراً.
الناتج：
حين ينقص @ من البريد الإلكتروني أو يقلّ طول كلمة المرور عن 6 محارف، يعرض الضغط على «Register» خطأً أحمر تحت الحقل المعني؛ وبعد أن يصبح الاثنان صالحَين، تعرض الصفحة «Registered successfully».💡 النقاط الأساسية
💡 نصيحة المس أولاً ثم اشتكِ لاحقاً: علم «تم اللمس» أو «تم الإرسال» يتحكم في ظهور الأخطاء، فلا يواجه المستخدم جداراً من النص الأحمر عند الدخول.
ℹ️ ملاحظة استخرج الأخطاء أثناء العرض بدل تخزينها بـ setState — فالاستخراج يضمن بقاءها متزامنة مع الحقل.
⚠️ تحذير نسيان preventDefault يترك النموذج ينفّذ الإرسال الأصلي للمتصفح ويعيد تحميل الصفحة، فتومض رسائل الخطأ ثم تختفي.
🏷️ المزيد من أنماط المكونات
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س أين ينبغي أن يكون التحقّق: في onChange أم في onSubmit؟
ج ضع فحوص الصيغة الحرجة في مكان واحد عند الإرسال؛ أما التلميحات اللطيفة الفورية فيمكن أن تكون في onChange أو onBlur — ولا تعارض بينهما.
س هل ينبغي تخزين رسائل الخطأ في الحالة؟
ج لا يُنصح بذلك. الأخطاء مشتقّة من الحالة، فاحسبها أثناء العرض؛ وتخزينها قد يُخرجها عن التزامن مع الحقل.
س لماذا لا تظهر الأخطاء بعد الإرسال؟
ج الأسباب الشائعة: نسي onSubmit استدعاء e.preventDefault() فتم الإرسال أصلياً وأُعيد تحميل الصفحة، أو لم يُضبط العلم الذي يعتمد عليه عرض الخطأ.
