نماذج جافا سكريبت
التحقق من صحة نموذج JavaScript
يمكن التحقق من صحة نموذج HTML بواسطة JavaScript.
إذا كان حقل النموذج (fname) فارغًا ، فإن هذه الوظيفة تنبه رسالة ، وتُرجع خطأ ، لمنع إرسال النموذج:
مثال جافا سكريبت
function validateForm() {
let
x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}يمكن استدعاء الوظيفة عند تقديم النموذج:
مثال على نموذج HTML
<form name="myForm" action="/action_page.php" onsubmit="return validateForm()"
method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
يمكن لـ JavaScript التحقق من صحة الإدخال الرقمي
غالبًا ما يتم استخدام 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 قيد التحقق من الصحة
- التحقق من القيد CSS Pseudo Selectors
- قيد التحقق من صحة خصائص DOM وطرقها
سمات إدخال HTML للتحقق من القيد
| Attribute | Description |
|---|---|
| disabled | Specifies that the input element should be disabled |
| max | Specifies the maximum value of an input element |
| min | Specifies the minimum value of an input element |
| pattern | Specifies the value pattern of an input element |
| required | Specifies that the input field requires an element |
| type | Specifies the type of an input element |
للحصول على قائمة كاملة ، انتقل إلى سمات إدخال HTML .
التحقق من صحة القيد محددات CSS الزائفة
| Selector | Description |
|---|---|
| :disabled | Selects input elements with the "disabled" attribute specified |
| :invalid | Selects input elements with invalid values |
| :optional | Selects input elements with no "required" attribute specified |
| :required | Selects input elements with the "required" attribute specified |
| :valid | Selects input elements with valid values |
للحصول على قائمة كاملة ، انتقل إلى CSS Pseudo Classes .