0Pricing
JavaScript Academy · درس

التحقق من صحة البيانات على جهة العميل

تحقّقوا من صحة الإدخال قبل إرساله إلى أي مكان.

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

لماذا نتحقق في جهة العميل

يوفر التحقق في جهة العميل ملاحظات فورية وتجربة أكثر سلاسة. تذكر أنه وسيلة تسهيل وليس إجراءً أمنيًا؛ لذلك تحقّق دائمًا من البيانات على الخادم أيضًا.

التحقق عند الإرسال

من الأنماط الشائعة فحص الحقول عند إرسال النموذج، وإلغاء الإرسال إذا كانت أي قيمة غير صالحة.

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

فحص حقل مطلوب

أزل المسافات الزائدة من القيمة وارفض الإدخال الفارغ. يمنع إزالة المسافات قبول السلاسل التي تتكون من مسافات فقط.

function checkName() {
  const v = nameInput.value.trim();
  return v.length > 0;
}

قواعد الطول

قارن طول القيمة بعد إزالة المسافات بالحدين الأدنى والأقصى لحقول مثل كلمات المرور.

function checkPassword() {
  const v = passwordInput.value;
  return v.length >= 8 && v.length <= 64;
}

مطابقة الأنماط

تختبر التعبيرات النمطية صيغًا مثل صيغ عناوين البريد الإلكتروني. اجعل الأنماط بسيطة وقرنها بعمليات تحقق على الخادم.

function checkEmail() {
  const v = emailInput.value.trim();
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v);
}

عرض رسائل الخطأ

اعرض الملاحظات بالقرب من الحقل باستخدام عنصر مخصص للخطأ وtextContent للحماية من XSS.

function showError(field, msg) {
  const err = field.nextElementSibling;
  err.textContent = msg;
}

مسح الأخطاء

أعد ضبط الرسالة عندما يصبح الحقل صالحًا حتى لا تبقى الأخطاء القديمة معروضة.

function clearError(field) {
  field.nextElementSibling.textContent = "";
}

التحقق المباشر

تحقّق عند حدث input أو blur لتوفير ملاحظات فورية أثناء كتابة المستخدم أو مغادرته للحقل.

emailInput.addEventListener("blur", () => {
  if (!checkEmail()) showError(emailInput, "Invalid email");
  else clearError(emailInput);
});

إتاحة الاستخدام مع aria-invalid

عيّن aria-invalid واربط الأخطاء باستخدام aria-describedby حتى تعلن التقنيات المساعدة عن المشكلات.

emailInput.setAttribute("aria-invalid", "true");

تركيز أول خطأ

عند فشل الإرسال، انقل التركيز إلى أول حقل غير صالح حتى يتمكن المستخدمون من إصلاحه فورًا.

function focusFirstError(fields) {
  const bad = fields.find((f) => !f.valid);
  if (bad) bad.el.focus();
}

تحقّق على الخادم أيضًا

يمكن تجاوز التحقق في جهة العميل بتعطيل JavaScript أو إنشاء طلبات مخصصة. اعتبر الخادم مصدر الحقيقة.

تحقق سريع

التفكير الأمني.

مراجعة

يفحص التحقق اليدوي الحقول من حيث كونها مطلوبة وطولها ونمطها، ويلغي الإرسال عند الفشل باستخدام preventDefault. اعرض الرسائل وامسحها بأمان باستخدام textContent، وتحقّق مباشرةً عند input/blur، وحسّن إمكانية الوصول باستخدام aria-invalid، وانقل التركيز إلى أول خطأ. أعد التحقق دائمًا على الخادم.

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

هل درس «التحقق من صحة البيانات على جهة العميل» مجاني؟

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

ماذا ستتعلم في «التحقق من صحة البيانات على جهة العميل»؟

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

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

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

كم من الوقت يستغرق درس «التحقق من صحة البيانات على جهة العميل»؟

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

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

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

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

  1. قراءة قيم الإدخال
  2. حدث submit
  3. التحقق من صحة البيانات على جهة العميل
  4. واجهة Constraint Validation API
← العودة إلى JavaScript Academy