API na JavaScript na Validation

الطرق والخصائص التي تقيد التحقق من صحة DOM.

الطريقة

الطريقة 描述
checkValidity() سيتم إرجاع true إذاً كان هناك بيانات صالحة في عنصر input.
setCustomValidity() يُضبط خاصية validationMessage لعنصر input.

属性

属性 描述
validity يحتوي على خصائص بولية تتعلق بصحة عنصر input.
validationMessage يحتوي على الرسالة التي سيتم عرضها المتصفح عند عدم صحة الصحة.
willValidate يُشير إلى ما إذا كان يجب التحقق من صحة عنصر input.

مثال - طريقة checkValidity()

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


<button onclick="myFunction()">Aiki</button>
<p id="demo"></p>
<script>
function myFunction() {
  const inpObj = document.getElementById("id1");
  if (!inpObj.checkValidity()) {
    document.getElementById("demo").innerHTML = inpObj.validationMessage;
  }
}
</script>

Try It Yourself

有效性属性

input 元素的有效性属性包含许多与数据有效性相关的属性：

属性 描述
customError 如果设置了自定义的有效性消息，则设置为 true。
patternMismatch 如果元素的值与其 pattern 属性不匹配，则设置为 true。
rangeOverflow 如果元素的值大于其 max 属性，则设置为 true。
rangeUnderflow 如果元素的值小于其 min 属性，则设置为 true。
stepMismatch 如果元素的值根据其 step 属性无效，则设置为 true。
tooLong 如果元素的值超过其 maxLength 属性，则设置为 true。
typeMismatch 如果元素的值根据其 type 属性无效，则设置为 true。
valueMissing 如果元素（带有 required 属性）没有值，则设置为 true。
valid 如果元素的值有效，则设置为 true。

实例

rangeOverflow 属性

hadda kuma ɗan input ɗin ɗan shiga 100 (input max 属性），saɗan koyi ɗaya:


<button onclick="myFunction()">Aiki</button>
<p id="demo"></p>
<script>
function myFunction() {
  let text = "Value OK";
  if (document.getElementById("id1").validity.rangeOverflow) {
    text = "Value too large";
  }
}
</script>

Try It Yourself

rangeUnderflow 属性

hadda kuma ɗan input ɗin ɗan shiga 100 (input max 属性），saɗan koyi ɗaya:

<input id="id1" type="number" min="100">
<button onclick="myFunction()">Aiki</button>
<p id="demo"></p>
<script>
function myFunction() {
  let text = = "Value OK";
  if (document.getElementById("id1").validity.rangeUnderflow) {
    text = "Value too small";
  }
}
</script>

Try It Yourself