انتقل إلى محتوى الدرس

Computing Validation Errors حساب قواعد التحقق والرسائل

نظّم النماذج متعددة الحقول في كائن حالة موحد، وأجّل رسائل التحقق بحدث onBlur وتتبع اللمس مع سمات الإتاحة القياسية، وافصل بين تحسين الواجهة وأمان الخادم.
4 صفوف تعليمية
ReactJS
0 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

اكتب قواعد الفحص داخل دالة نقية مساعدة validateForm(values) تفحص قيم الكائن الحالي وتعيد كائن أخطاء يربط اسم كل حقل برسالة إرشادية واضحة قابلة للتنفيذ، مثل تحديد الحد الأدنى لطول كلمة المرور بدلاً من عبارة غامضة.

ولأن التحقق المحلي فوري وحتمي، استدعِ const errors = validateForm(form) مباشرة أثناء التصيير بدلاً من تخزين الأخطاء في متغير حالة إضافي قد ينفصل عن القيم الفعلية.

الصف 2 صورة توضيحية
مسار التحقق من النماذج في 4 مراحل: تحديث كائن الحالة ثم رصد مغادرة الحقل ثم حساب الأخطاء وسمات الإتاحة ثم التحقق الملزم في الخادم
الصف 3 كود برمجي
HTML
function validateSignup(values) {
  const errors = {};
  if (values.username.trim().length < 3) {
    errors.username = 'Minimum 3 characters required.';
  }
  if (values.password.length < 8) {
    errors.password = 'Use 8 or more characters.';
  }
  return errors;
}
الصف 4 ملاحظة هامة