PricingLoginStart free
HTML Academy · درس

مفاضلات التحقق باستخدام HTML5 وJavaScript

تحديد متى تعتمدون على التحقق في HTML5 ومتى تستخدمون JavaScript مخصصًا

الدرس 4 من 414 خطوة

مفاضلات التحقق باستخدام HTML5 وJavaScript درس مجاني في HTML Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في HTML Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة HTML Academy 4 دروس في المجموع.

نهجان للتحقق

نهجان للتحقق من النماذج:

  • التحقق الأصلي في HTML5 — سمات مدمجة وواجهة المتصفح
  • التحقق باستخدام JavaScript — منطق ورسائل وتوقيت مخصصة

لكل نهج مزاياه. وتجمع معظم النماذج الواقعية بينهما.

مزايا التحقق في HTML5

مزايا التحقق الأصلي في HTML5:

  • لا يتطلب أي JavaScript
  • يعمل من دون JavaScript، وفق مبدأ التحسين التدريجي
  • رسائل خطأ مدمجة في المتصفح، ومترجمة إلى اللغة المحلية
  • تستخدم لوحات المفاتيح في الأجهزة المحمولة السمة type، مثل email وtel وnumber
  • الفئتان شبه التلقائيتين في CSS، :valid و:invalid

عيوب التحقق في HTML5

قيود التحقق الأصلي في HTML5:

  • يقتصر تنسيق رسائل الخطأ على الإعدادات الافتراضية للمتصفح
  • يُجرى التحقق عند الإرسال فقط، وليس عند فقدان التركيز أو الإدخال
  • لا يمكن التحقق من القواعد التي تربط بين الحقول، مثل تطابق كلمتي المرور
  • لا يمكن إجراء تحقق غير متزامن، مثل التحقق من الخادم مما إذا كان اسم المستخدم محجوزًا
  • تختلف رسائل الخطأ باختلاف المتصفحات ولغات أنظمة التشغيل

مزايا التحقق باستخدام JavaScript

مزايا التحقق باستخدام JavaScript:

  • تحكم كامل في نص رسالة الخطأ وتنسيقها
  • توقيت مخصص، عند فقدان التركيز أو الإدخال أو الإرسال
  • التحقق من الحقول المرتبطة، مثل تأكيد كلمة المرور
  • التحقق غير المتزامن، مثل التحقق من توفر اسم المستخدم
  • سلوك متسق عبر المتصفحات

عيوب التحقق باستخدام JavaScript

قيود التحقق باستخدام JavaScript فقط:

  • يفشل إذا كان JavaScript معطّلًا أو محظورًا
  • يتطلب كتابة وصيانة المزيد من التعليمات البرمجية
  • تتطلب إمكانية الوصول تطبيق ARIA بعناية
  • إعادة تنفيذ ما يفعله المتصفح تلقائيًا

النهج الهجين

أفضل ممارسة: الجمع بين النهجين:

<form novalidate>   <!-- disable default UI, keep semantics -->
  <input type="email" required pattern="...">
  <!-- HTML attributes: define the constraints -->
  <!-- novalidate: custom JS shows the errors -->
</form>

<script>
// Use Constraint Validation API to read the validity state:
if (input.validity.valueMissing) showError('Required');
if (input.validity.typeMismatch) showError('Invalid email');
</script>

التحقق دائمًا على جانب الخادم

بغض النظر عن نهج التحقق من جانب العميل الذي تستخدمونه، أجروا التحقق دائمًا على الخادم:

  • يمكن للمستخدمين تعطيل JavaScript
  • يمكن لأدوات مطوري المتصفح تعديل الطلبات
  • يتجاوز المهاجمون التحقق من جانب العميل عمدًا
  • التحقق على الخادم هو بوابة الأمان، أما التحقق من جانب العميل فهو لتحسين تجربة المستخدم

تجربة المستخدم مع الملاحظات الفورية

أفضل الممارسات المدعومة بالأبحاث لتوقيت ملاحظات التحقق:

  • لا تعرضوا الأخطاء قبل أن يتفاعل المستخدم مع الحقل
  • أجروا التحقق عند فقدان التركيز، أي عند مغادرة الحقل، لاكتشاف الأخطاء الأولية
  • امسحوا الأخطاء فورًا عندما يصلحها المستخدم، عند الإدخال
  • اعرضوا مؤشرات النجاح، مثل علامة صح خضراء، عندما تكون الحقول صالحة

معالجة الأخطاء بطريقة سهلة الوصول

قائمة تحقق لأخطاء النماذج سهلة الوصول:

  • ينبغي أن تكون رسائل الخطأ نصية، لا أن تعتمد على اللون وحده
  • استخدموا role="alert" أو aria-live="assertive" لحاويات الأخطاء
  • عيّنوا aria-invalid="true" لحقول الإدخال غير الصالحة
  • اربطوا حقول الإدخال برسائل الخطأ باستخدام aria-describedby
  • انقلوا التركيز إلى أول خطأ بعد فشل الإرسال

مقارنة HTML5 pattern بالتعبير النمطي على الخادم

انتبهوا إلى الاختلافات بين pattern في HTML5 والتعبير النمطي على الخادم:

<!-- HTML5 pattern: implicitly anchored at start AND end -->
<input pattern="[a-z]+">  <!-- matches ONLY lowercase letters, nothing else -->

// Server-side (Python, Node, PHP):
// /^[a-z]+$/ === HTML5 pattern equivalent
// [a-z]+ would also match partial strings on server
// Keep server regex consistent with HTML pattern

مكتبات التحقق

متى ينبغي استخدام مكتبة للتحقق:

  • النماذج البسيطة — تكفي سمات HTML5 مع Constraint Validation API
  • النماذج المعقدة — استخدموا React Hook Form أو Formik أو Vee-Validate
  • التحقق من المخططات — استخدموا Zod أو Yup، إذ تعملان أيضًا على الخادم
  • المعالجات متعددة الخطوات — استخدموا دائمًا مكتبة لإدارة الحالة

ملخص التحسين التدريجي

حزمة التحقق المثالية من الأساس إلى الأعلى:

  1. قيود HTML5 — تكون موجودة دائمًا، وتعمل من دون JavaScript
  2. ‏:valid و:invalid في CSS — ملاحظات مرئية من دون JavaScript
  3. Constraint Validation API مع novalidate — تجربة مستخدم أفضل باستخدام JavaScript
  4. التحقق المخصص غير المتزامن — لقواعد العمل المعقدة
  5. التحقق على الخادم — بوابة الأمان

تحقق سريع

ما نوع التحقق الذي يُعد بوابة الأمان الحقيقية ولا يمكن تجاوزه؟

أجب عليها في الدرس التفاعلي

مراجعة: المفاضلات بين أساليب التحقق

ملخص استراتيجية التحقق:

  • التحقق الأصلي في HTML5 — بسيط وتدريجي، لكنه محدود في التنسيق
  • JavaScript — تحكم كامل وسهولة وصول، لكن تعطيل JavaScript يعني تعطيل التحقق
  • النهج الهجين — قيود HTML5 مع novalidate ورسائل أخطاء مخصصة باستخدام JavaScript
  • التحقق على جانب الخادم — مطلوب للأمان وليس اختياريًا
  • أجروا التحقق عند فقدان التركيز، وامسحوا الأخطاء عند الإدخال، وانقلوا التركيز إلى أول خطأ عند الإرسال
البدء مجانًا

تعلم HTML مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات
40
الدروس
159
ابدأ التعلم مجانًاعرض الدورة الكاملة

الأسئلة الشائعة

هل درس «مفاضلات التحقق باستخدام HTML5 وJavaScript» مجاني؟

نعم — نص درس «مفاضلات التحقق باستخدام HTML5 وJavaScript» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة HTML Academy، انتقل إلى CoddyKit PRO. تتضمن دورة HTML Academy 4 دروس في المجموع.

ماذا ستتعلم في «مفاضلات التحقق باستخدام HTML5 وJavaScript»؟

تحديد متى تعتمدون على التحقق في HTML5 ومتى تستخدمون JavaScript مخصصًا تتمرن على HTML Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ HTML Academy؟

لا تُشترط خبرة سابقة. HTML Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «مفاضلات التحقق باستخدام HTML5 وJavaScript»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس HTML Academy هذا؟

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

جميع الدروس في هذه الدورة

  1. required وpattern وmin وmax وmaxlength
  2. السمة novalidate
  3. أساسيات Constraint Validation API
  4. مفاضلات التحقق باستخدام HTML5 وJavaScript
← العودة إلى HTML Academy