JavaScript Academy · درس

واجهة Constraint Validation API

استخدموا التحقق المضمّن من صحة البيانات.

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

التحقق المضمّن

تدعم حقول نماذج HTML سمات مثل required وmin وmax وpattern وtype="email". وتتيح Constraint Validation API لـ JavaScript فحص هذا التحقق المضمّن والتحكم فيه.

checkValidity

تعيد checkValidity قيمة منطقية وتطلق حدث invalid على كل عنصر تحكم فاشل، من دون عرض الفقاعة المنبثقة الخاصة بالمتصفح.

const email = document.querySelector("#email");
console.log(email.checkValidity());

reportValidity

تشبه reportValidity الدالة checkValidity، لكنها تعرض أيضًا واجهة رسائل التحقق الخاصة بالمتصفح للحقول غير الصالحة.

if (!form.reportValidity()) {
  console.log("show built-in errors");
}

كائن validity

يحتوي كل عنصر تحكم على كائن validity يتضمن أعلامًا منطقية تصف المشكلة الموجودة بدقة.

console.log(email.validity.valueMissing);  // empty required
console.log(email.validity.typeMismatch);  // wrong format
console.log(email.validity.tooShort);

validity.valid

تكون validity.valid صحيحة فقط عندما يجتاز الحقل جميع القيود، وهي تلخص الأعلام الأخرى.

if (email.validity.valid) {
  console.log("ok");
}

validationMessage

تحتوي validationMessage على الرسالة المترجمة التي سيعرضها المتصفح للخطأ الحالي.

console.log(email.validationMessage);

setCustomValidity

تجعل setCustomValidity الحقل غير صالح مع رسالتك الخاصة. وتشير السلسلة غير الفارغة إلى أن الحقل غير صالح، بينما تمسح السلسلة الفارغة الرسالة.

function checkMatch() {
  if (pass.value !== confirm.value) {
    confirm.setCustomValidity("Passwords must match");
  } else {
    confirm.setCustomValidity("");
  }
}

امسح الأخطاء المخصصة دائمًا

إذا عيّنت رسالة مخصصة، فيجب مسحها باستخدام سلسلة فارغة بمجرد أن يصبح الحقل صالحًا، وإلا فسيظل غير صالح إلى الأبد.

confirm.addEventListener("input", () => {
  confirm.setCustomValidity("");
  checkMatch();
});

حدث invalid

استمع إلى حدث invalid لتشغيل منطق مخصص، مثل تنسيق الحقل، عند فشل التحقق.

email.addEventListener("invalid", () => {
  email.classList.add("error");
});

تعطيل الفقاعات الأصلية

أضف novalidate إلى النموذج لمنع النوافذ المنبثقة الأصلية، مع الاستمرار في استخدام API لعرض رسائلك الخاصة.

form.setAttribute("novalidate", "");
form.addEventListener("submit", (e) => {
  if (!form.checkValidity()) e.preventDefault();
});

التنسيق باستخدام :valid و:invalid

تنسّق الفئات الزائفة في CSS، وهي :valid و:invalid، الحقول تلقائيًا وفق حالة صلاحيتها.

تحقق سريع

قاعدة تحقق مخصصة.

مراجعة

تعمل Constraint Validation API مع سمات قيود HTML. استخدم checkValidity/reportValidity لاختبار الأخطاء وعرضها اختياريًا، وافحص أعلام validity وvalidationMessage، وأضف قواعد مخصصة باستخدام setCustomValidity، مع مسحها بسلسلة فارغة. ويساعد حدث invalid وCSS ‏:valid/:invalid في تنسيق الحقول.

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

هل درس «واجهة Constraint Validation API» مجاني؟

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

ماذا ستتعلم في «واجهة Constraint Validation API»؟

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

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

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

كم من الوقت يستغرق درس «واجهة Constraint Validation API»؟

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

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

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

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

← العودة إلى JavaScript Academy