JAVASCRIPT Tutorial

صحة النموذج

ما هو التحقق من صحة النموذج؟

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

أنواع التحقق من صحة النموذج

هناك نوعان رئيسيان للتحقق من صحة النموذج:

  • تحقق الطرف الخلفي (Backend Validation): يتم تنفيذ هذا التحقق على خادم الويب بعد إرسال النموذج.
  • تحقق الطرف الأمامي (Frontend Validation): يتم تنفيذ هذا التحقق في متصفح المستخدم قبل إرسال النموذج.

خطوات التحقق من صحة النموذج

  1. تحديد قواعد التحقق
  • حدد نوع البيانات المطلوبة لكل حقل (على سبيل المثال: نص، رقم، بريد إلكتروني).
  • حدد القيود على طول البيانات وتنسيقها (على سبيل المثال: الحد الأقصى لعدد الأحرف، نمط تاريخ معين).
  1. تنفيذ التحقق
  • تحقق الطرف الخلفي: استخدام لغات برمجة خادم الويب مثل PHP أو Java لتنفيذ قواعد التحقق على الخادم.
  • تحقق الطرف الأمامي: استخدام لغة JavaScript لتنفيذ قواعد التحقق في المتصفح.
  1. التعامل مع الأخطاء
  • عرض رسائل الخطأ للمستخدمين عند اكتشاف بيانات غير صالحة.
  • تمكين المستخدمين من تصحيح البيانات وإعادة إرسال النموذج.

مثال على JavaScript للتحقق من صحة النموذج

function validateForm() {
  // الحصول على قيم الحقول
  let username = document.getElementById("username").value;
  let email = document.getElementById("email").value;
  let password = document.getElementById("password").value;

  // قواعد التحقق
  if (username.length == 0) {
    alert("يجب إدخال اسم المستخدم.");
    return false;
  }
  if (email.length == 0) {
    alert("يجب إدخال البريد الإلكتروني.");
    return false;
  } else if (!validateEmail(email)) {
    alert("يجب إدخال بريد إلكتروني صالح.");
    return false;
  }
  if (password.length == 0) {
    alert("يجب إدخال كلمة المرور.");
    return false;
  } else if (password.length < 8) {
    alert("يجب أن تحتوي كلمة المرور على 8 أحرف على الأقل.");
    return false;
  }

  // إذا اجتاز النموذج التحقق، فأعده للإرسال
  return true;
}

// دالة تساعد للتحقق من صحة البريد الإلكتروني
function validateEmail(email) {
  const regex = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  return regex.test(email);
}