API التحقق جافا سكربت

طريقة التحقق من القيود DOM

الخصائص الوصف
تحقق من الصحة إذا كانت تحتوي على بيانات صالحة، يتم عودة true.
setCustomValidity() تعيين خاصية validationMessage لمكون input.

إذا كان يحتوي حقل الإدخال على بيانات غير صالحة، يتم عرض رسالة:

طريقة checkValidity()

<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
  const inpObj = document.getElementById("id1");
  if (!inpObj.checkValidity()) {
    document.getElementById("demo").innerHTML = inpObj.validationMessage;
  }
}
</script>

جرب بنفسك

خصائص التحقق DOM

الخصائص الوصف
validity تحتوي على الخاصيات الثنائية المتعلقة بصحة مكون الإدخال.
validationMessage تحتوي على الرسالة التي سيتم عرضها من قبل المتصفح عند صحة false.
willValidate تعين ما إذا كان سيتم التحقق من صحة مكون input.

خصائص الصحة

يحتوي خاصية صحة مكون input على العديد من الخاصيات المتعلقة بصحة البيانات:

الخصائص الوصف
customError إذا تم تعيين رسالة صحة مخصصة، يتم تعيينها على true.
patternMismatch إذا كانت قيمة العنصر غير متطابقة مع خاصية pattern، يتم تعيينها على true.
rangeOverflow إذا كانت قيمة العنصر أكبر من خاصية max، يتم تعيينها على true.
rangeUnderflow إذا كانت قيمة العنصر أقل من خاصية min، يتم تعيينها على true.
stepMismatch إذا كانت قيمة العنصر غير صالحة بالنسبة لخاصية step، يتم تعيينها على true.
tooLong إذا كانت قيمة العنصر أكبر من خاصية maxLength، يتم تعيينها على true.
typeMismatch إذا كانت قيمة العنصر غير صالحة بالنسبة لخاصية type، يتم تعيينها على true.
valueMissing إذا لم يكن للعنصر قيمة (له خاصية required)، يتم تعيينها على true.
صالح إذا كانت قيمة العنصر صالحة، يتم تعيينها على true.

مثال

إذا كان الرقم في حقل الإدخال أكبر من 100 (مكون input العنصر الحد الأعلى إذا كان يتم عرض هذا الخصائص)،则会显示一条消息：

خصائص rangeOverflow

<input id="id1" type="number" max="100">
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
  let text = "القيمة جيدة";
  if (document.getElementById("id1").validity.rangeOverflow) {
    text = "القيمة كبيرة جدًا";
  }
}
</script>

جرب بنفسك

إذا كان الرقم في حقل الإدخال أقل من 100 (عنصر الإدخال، الحد الأدنى إذا كان يتم عرض هذا الخصائص)،则会显示一条消息：

خصائص rangeUnderflow

<input id="id1" type="number" min="100">
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
  let text = "القيمة جيدة";
  if (document.getElementById("id1").validity.rangeUnderflow) {
    text = "القيمة صغيرة جدًا";
  }
}
</script>

جرب بنفسك