Web Forms API
في هذا الدرس سوف نتعرف علي طريق التعامل مع API Forms وكيفية التحقق من البيانات الموجودة بداخلها
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
الشروحات chevron_left Web Forms API chevron_left JavaScript
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
| Property | Description |
| validity | يحتوي على خصائص منطقية تتعلق بصلاحية عنصر الإدخال. |
| validationMessage | يحتوي على الرسالة التي سيعرضها المتصفح عندما تكون الصلاحية خاطئة. |
| willValidate | يشير إلى ما إذا كان سيتم التحقق من صحة عنصر الإدخال. |
</> 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
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
تقوم forms collection بإرجاع مجموعة من جميع عناصر والخصائص الخاصة بعنصر <form> في المستند
Syntax
document.forms
| Property/Method |
|
| length |
هذه الخاصية تستخدم في أرجاع عدد العناصر من النوع <form> |
| [index] |
تستخدم هذه الدالة في أرجاع عنصر <form> معين عن طريق ال index الخاص به حيث يبدا موقع هذه العناصر من الصفر وليس 1 |
| item(index) |
تستخدم هذه الدالة في أرجاع عنصر <form> معين عن طريق ال index الخاص به حيث يبدا موقع هذه العناصر من الصفر وليس 1 |
| namedItem(id) |
تستخدم هذه الدالة في أرجاع عنصر <form> معين عن طريق ال id الخاص به |
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم هندسة البرمجيات. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال هندسة البرمجيات. مهمتنا ليست فقط تعليم هندسة البرمجيات، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
الدورات
لا يوجد
