JavaScript

Web Forms API

في هذا الدرس سوف نتعرف علي طريق التعامل مع API Forms وكيفية التحقق من البيانات الموجودة بداخلها 

التاريخ

14 نوفمبر 2021

الدروس

146

المستوى

العامة

اللغة

انجليزي

المشاهدات

1316

المواضيع

24
الشروحات chevron_left Web Forms API chevron_left JavaScript

Web Forms API

مراجعة تقنية
Mostafa Hefny

Mostafa Hefny

CEO & Founder CloseTag

</> 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 الخاص به 

Example
var x = document.forms.length;
[index]
var x = document.forms[0].id;
item(index)
var x = document.forms.item(0).id;
namedItem(id)
var x = document.forms.namedItem("myCarForm").innerHTML;
معلومات تهمك
  • لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات