طَبِّقْهاتعلّم المبدأ، وطبّقه بيدكمقرر 131 · تقنيات تطوير الواجهات الأمامية
الدرس 27 · الوحدة 8: صفحات الويب التفاعلية

النماذج والتحقق من المدخلات

نتحقق من بيانات الزائر قبل إرسالها، ونعطيه رسائل واضحة. ⏱ نحو 30 دقيقة.

البريدali@✗ البريد غير صحيحali@mail.com✓ ممتازإرسال
بعد هذا الدرس ستستطيع أن:
  • تستمع لحدث submit وتوقف الإرسال الافتراضي.
  • تقرأ القيم بـ value وتنظفها بـ trim وتحولها بـ Number.
  • تكتب قواعد تحقق وتعرض رسالة لكل خطأ.
  • تشرح لماذا يلزم التحقق في الخادم أيضًا.
جرّب بنفسك أسئلة التقييم

١حدث الإرسال submit

في الدرس 12 جعلنا المتصفح يتحقق بـ required. الآن نتحقق بأنفسنا بـ JavaScript لنعطي رسائل أوضح. نستمع لحدث submit على النموذج، ونوقف الإرسال إذا كانت البيانات خطأ:

<form id="f">  <label for="name">الاسم</label>  <input id="name">  <button>إرسال</button>  <p id="msg"></p></form><script src="script.js"></script>
index.html
Console
السطرمعناه
event.preventDefault()أوقف السلوك الافتراضي (إرسال النموذج وتحميل صفحة جديدة)، لأننا سنتصرف بأنفسنا.
.valueما كتبه الزائر في الحقل، وهو نص دائمًا.
.trim()يحذف المسافات من البداية والنهاية، فلا يمر اسم كله مسافات.

٢قواعد تحقق شائعة

ما نتحقق منهالكود
الحقل غير فارغvalue.trim() === ""
طول أدنىvalue.length < 8
يحتوي حرفًا معيّنًاvalue.includes("@")
يبدأ بنصphone.startsWith("05")
عدد في مجالconst age = Number(value); ثم age >= 16 && age <= 60
ليس عددًاisNaN(Number(value))
حقلان متطابقانpass.value === confirm.value

٣تحقق كامل مع رسائل لكل حقل

<form id="f">  <label for="email">البريد</label>  <input id="email">  <div class="error" id="emailErr"></div>   <label for="pass">كلمة المرور</label>  <input id="pass" type="password">  <div class="error" id="passErr"></div>   <button>تسجيل</button>  <p id="result"></p></form><script src="script.js"></script>
index.html
Console

الفكرة: متغيّر valid يبدأ صحيحًا، وأي خطأ يجعله خطأ. ونمسح الرسائل القديمة في البداية حتى لا تبقى بعد التصحيح.

٤حاسبة بالنموذج

النموذج لا يعني دائمًا «إرسالًا». هنا نقرأ الأرقام، ونحوّلها بـ Number، ونعرض النتيجة:

<form id="calc">  <label>السعر <input id="price" value="100"></label>  <label>الخصم ٪ <input id="disc" value="20"></label>  <button>احسب</button></form><p id="res"></p><script src="script.js"></script>
index.html
Console

٥لماذا لا يكفي تحقق الواجهة؟

كل ما في المتصفح يمكن للزائر الماهر تعديله أو تجاوزه بأدوات المطوّر. لذلك:

توقّع وتحقّق

ما وظيفة event.preventDefault() في حدث submit؟

نتصرف بأنفسنا.

نوع قيمة input.value دائمًا:

حوّلها بـ Number.

حذف المسافات من طرفي النص:

trim في JavaScript.

أين يجب التحقق للأمان؟

لا تثق بالمتصفح.

الخلاصة

تحدٍّ برمجي: نموذج حجز طاولة

متقدم

اكتب التحقق من نموذج حجز طاولة في المقهى. عند الإرسال: اعرض رسالة الخطأ المناسبة في #msg بالصنف error، أو رسالة النجاح بالصنف ok.

المطلوب:
  • الاسم فارغ (أو مسافات): «اكتب اسمك»
  • الجوال لا يبدأ بـ 05 أو ليس 10 أرقام: «رقم الجوال غير صحيح»
  • عدد الأشخاص ليس من 1 إلى 10: «العدد من 1 إلى 10»
  • كل شيء صحيح: «تم الحجز لـ (الاسم)» مثل: تم الحجز لـ سارة
  • الصفحة لا تُعاد تحميلها عند الإرسال.
👀 اعرض شكل الناتج المطلوب
الناتج المطلوب
Console
✓ التحقق الآلي من حلّك:
  • الاسم الفارغ: «اكتب اسمك» بالصنف error.
  • جوال خطأ: «رقم الجوال غير صحيح».
  • عدد خطأ: «العدد من 1 إلى 10».
  • كل شيء صحيح: «تم الحجز لـ سارة» بالصنف ok.
  • الإرسال الافتراضي متوقف (preventDefault).

💡 تلميح 1
phone.startsWith("05") و phone.length === 10
💡 تلميح 2
اقرأ العدد بـ Number(…value) ثم قارن: people < 1 || people > 10

حاول بنفسك أولًا؛ للمسألة أكثر من حلّ صحيح.

<form id="book">  <label for="name">الاسم</label>  <input id="name">  <label for="phone">الجوال</label>  <input id="phone">  <label for="people">عدد الأشخاص</label>  <input id="people" type="number">  <button>احجز</button></form><p id="msg"></p><script src="script.js"></script>
انتقل إلى تقييم الدرساختيار من متعدد، وصح وخطأ، وأكمل الفراغ، وتتبّع الناتج.ابدأ التقييم ←

📝 معلم؟ أرسل ملاحظة للمؤلف عن هذا الدرس