في هذا الدرس 5تصفّح المواضيع
Web Forms API
Web Forms API
| Property | Description |
| checkValidity ( ) | هي خاصية تقوم بأرجاع القيمة "true" اذا كان حقل الادخال يحتوي علي بيانات مسموح بها |
| setCustomValidity ( ) | هي عبارة عن خاصية تستخدم في تحديد القواعد التي يتم التحقق من البيانات بنائا عليها |
Example
<input id="id1" type="number" max="100">
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
let text = "Value OK";
if (document.getElementById("id1").validity.rangeOverflow) {
text = "Value too large";
}
}
</script>في المثال السابق استخدمنا كل من
- ( )validationMesssage : لنقوم بتحديد اقصي عدد يمكن ادخاله هو 300 واقل عدد هو 100
- ( )checkValidity : تستخدم في التحقق من ما اذا تم تنفيذ القواعد التي قمنا بوضعها باستخدام الدالة السابقة او لا اي انها تقوم بتحقق من ان الرقم المدخل يقع بين 100 و 300 او لا
Constraint Validation DOM Properties
Constraint Validation DOM Properties
| Property | Description |
| validity | يحتوي على خصائص منطقية تتعلق بصلاحية عنصر الإدخال. |
| validationMessage | يحتوي على الرسالة التي سيعرضها المتصفح عندما تكون الصلاحية خاطئة. |
| willValidate | يشير إلى ما إذا كان سيتم التحقق من صحة عنصر الإدخال. |
Validity Properties
Validity Properties
هناك العديد من الخاصيات properties التي تستخدم في التحقق من البيانات وسوف تذكرها فيما يلي
| Property | Description |
| customError | تقوم بأرجاع القيمة true اذا تم تحقيق شرط التحقق الذي قمنا بتعيينه |
| patternMismatch | تقوم بأرجاع القيمة true إذا كانت قيمة العنصر لا تتطابق مع سمة النمط الخاصة به |
| rangeOverflow | تقوم بأرجاع القيمة true اذا كانت القيمة العظمي للعنصر اكبر من القيمة المحددة |
| rangeUnderflow | تكون قيمتها true اذا كانت قيمة العنصر اقل من قيمة ال attribute "min" |
| stepMismatch | تكون قيمتها true ا إذا كانت قيمة العنصر غير صالحة حسب سمة step الخاصة به. |
| tooLong | تكون قيمتها true اذا كانت قيمة العنصر الخاص بها تتجازو قيمة ال attribute التالي maxLength |
| typeMismatch | تكون قيمتها true اذا كانت قيمة العنصر الخاص بها غير متوافقطة مع مع نوع ال attributer الخاص بها |
| valueMissing | تكون قيمتها true اذا كانت الخاصية "required" الخاصة بالعنصر الخاص بها لا تحتوي علي اي قيمة |
| valid | تكون قيمتها true اذا كانت قيمة العنصر الخاص بها هي قيمة صحيحة |
Examples
Examples
rangeOverflow
استخدمنا الخاصية في التحقق من ان القيمة المدخلة اكبر من ال 100 او لا
<input id="id1" type="number" max="100">
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
let text = "Value OK";
if (document.getElementById("id1").validity.rangeOverflow) {
text = "Value too large";
}
}
</script>rangeUnderflow
استخدمنا الخاصية في التحقق من ان القيمة المدخلة اقل من ال 100 او لا
<input id="id1" type="number" min="100">
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
let text = = "Value OK";
if (document.getElementById("id1").validity.rangeUnderflow) {
text = "Value too small";
}
}
</script>
DOM forms
DOM forms
تقوم forms collection بإرجاع مجموعة من جميع عناصر والخصائص الخاصة بعنصر <form> في المستند
Syntax
document.forms| Property/Method | |
| length | هذه الخاصية تستخدم في أرجاع عدد العناصر من النوع <form> |
| [index] | تستخدم هذه الدالة في أرجاع عنصر <form> معين عن طريق ال index الخاص به حيث يبدا موقع هذه العناصر من الصفر وليس 1 |
| item(index) | تستخدم هذه الدالة في أرجاع عنصر <form> معين عن طريق ال index الخاص به حيث يبدا موقع هذه العناصر من الصفر وليس 1 |
| namedItem(id) | تستخدم هذه الدالة في أرجاع عنصر <form> معين عن طريق ال id الخاص به |
Example
[index]
item(index)
namedItem(id)
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.