العودة إلى الدورة

الدرس 33: خصائص التحقق من صحة النموذج (Required, Pattern)

الدورة الاحترافية في HTML: من الصفر إلى مطور ويب

33. خصائص التحقق من صحة النموذج

تسمح لنا HTML بتعريف قواعد التحقق الأساسية مباشرة في الترميز، مما يوفر طبقة أولية سريعة من التحقق من صحة جانب العميل قبل أن تصل البيانات إلى الخادم.

33.1 خاصية required

إذا كانت موجودة، يجب على المستخدم ملء الحقل قبل إرسال النموذج. إذا ترك فارغاً، يعرض المتصفح رسالة خطأ قياسية.

html <label for="username">اسم المستخدم:</label> <input type="text" id="username" name="user" required>

33.2 الحد الأدنى والأقصى للطول (minlength, maxlength)

تستخدم لمدخلات النص لتحديد عدد الأحرف المقبول.

html <input type="password" name="new_password" minlength="8" maxlength="20" required>

33.3 خاصية pattern (التعبيرات النمطية - Regular Expressions)

تسمح لك خاصية pattern بتحديد تعبير نمطي (RegEx) يجب أن تتطابق معه قيمة الإدخال. يستخدم هذا للتحقق المعقد من الصحة، مثل الرموز البريدية أو التنسيقات المخصصة.

html <label for="zip">الرمز البريدي الأمريكي (5 أرقام):</label>

<!-- يتطلب النمط 5 أرقام بالضبط: [0-9] تعني أي رقم، {5} تعني 5 مرات بالضبط --> <input type="text" id="zip" name="zipcode" pattern="[0-9]{5}" title="رمز بريدي مكون من خمسة أرقام">

ملاحظة: خاصية title مهمة هنا، لأنها توفر تلميحاً للمستخدم يشرح التنسيق المطلوب.