نماذج جافا سكربت

تحقق نموذج JavaScript

يمكن إكمال تحقق نموذج HTML باستخدام JavaScript.

إذا كان مجال النموذج (fname) فارغًا، فإن هذه الوظيفة ستعرض رسالة وتعيد false لمنع تقديم النموذج:

مثال JavaScript

function validateForm() {
  let x = document.forms["myForm"]["fname"].value;
  if (x == "") {
    alert("يجب ملء الاسم");
    return false;
  }
}

يمكن استدعاء هذه الوظيفة عند تقديم النموذج:

مثال على نموذج HTML

<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">
الاسم: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

جربها بنفسك

يمكن للجافا سكربت التحقق من إدخال الأرقام

يُستخدم JavaScript عادةً للتحقق من إدخال الأرقام:

أدخل رقم بين 1 و 10:

جربها بنفسك

تحقق التلقائي لنموذج HTML

يمكن تنفيذ تحقق نموذج HTML بشكل تلقائي بواسطة المتصفح:

إذا كان حقل النموذج (fname) فارغًا، required الخصائص ستمنع تقديم هذا النموذج:

مثال على نموذج HTML

<form action="/action_page.php" method="post">
  <input type="text" name="fname" required>
  <input type="submit" value="Submit">
</form>

جربها بنفسك

نصيحة:لا يعمل التحقق التلقائي لـ HTML في إصدار Internet Explorer 9 أو أقدم.

تحقق البيانات

تحقق البيانات هو عملية تأكد من أن إدخال المستخدم نظيفًا، صحيحًا، ومفيدًا.

المهمة المعتادة للتحقق هي:

  • هل قام المستخدم بملء جميع الحقول المطلوبة؟
  • هل أدخل المستخدم تاريخًا صالحًا؟
  • هل أدخل المستخدم نصًا في حقل الرقم؟

غالبًا ما تكون الغرض من التحقق من البيانات هو التأكد من أن إدخال المستخدم صحيح.

يمكن تعريف التحقق بطرق متعددة وبطرق متعددة.

يتم التحقق من قبل خادم الويب بعد إرسال البيانات إلى الخادم.

يتم التحقق من قبل عميل الويب قبل إرسال البيانات إلى خادم الويب.

التحقق المحدد لـ HTML

HTML5 إدخال مفهوم جديد في التحقق من صحة HTML، يُدعى التحقق المحدد.

تحقق القيود HTML يعتمد على:

  • تحقق القيود HTML input الخاصيات
  • مزود CSS لتحقق القيود
  • تحقق القيود DOM الخاصيات والأساليب

تحقق القيود HTML input الخاصيات

الخصائص الوصف
disabled تحديد تعطيل العنصر الإدخالي.
max تحديد القيمة الأعلى للعنصر الإدخالي.
min تحديد القيمة الأدنى للعنصر الإدخالي.
pattern تحديد نموذج القيمة للعنصر الإدخالي.
required تحديد أن الحقل الإدخالي مطلوب.
type تحديد نوع عنصر الإدخال.

للحصول على قائمة كاملة، يرجى زيارة خصائص إدخال HTML.

مزود CSS لتحقق القيود

المساهم الوصف
:disabled اختيار عنصر إدخال مع خاصية "disabled".
:invalid اختيار عنصر إدخال يحتوي على قيمة غير صالحة.
:optional اختيار عنصر إدخال بدون خاصية "required".
:required اختيار عنصر إدخال مع خاصية "required".
:valid اختيار عنصر إدخال يحتوي على قيمة صالحة.

للحصول على قائمة كاملة، يرجى زيارة مزود CSS.