API ya Validation ya JavaScript

Inaonyesha viwango na vipengenye vya DOM vya uharibifu wa mawasiliano.

Method

Method 描述
checkValidity() Inarudi true kama elementi ya input ina data ya maadili.
setCustomValidity() Inasajili ujumbe wa maadili ya input elementi.

属性

属性 描述
validity Inaandika mafanikio ya input elementi kuhusu uharibifu.
validationMessage Inaandika ujumbe wa kuzingatia kama anaingia kwa uharibifu.
willValidate Inaonyesha kama inatumiwa maadili ya uharibifu ya elementi ya input.

Mfano - method ya checkValidity()

Kamaanisha msaidia kamaanisha ya data inayotumiwa haikufikii, inaonyesha ujumbe:


<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>

Jifunze tena

有效性属性

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 Kama thamani ya kipimo ni sahihi, niweze kumwandikia kweli.

Mfano

属性 ya rangeOverflow

Kama thamani ya input ya namba inaingia 100 (input ya max Je yaani yotelezo:

<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>

Jifunze tena

属性 ya rangeUnderflow

Kama thamani ya input ya namba inaingia 100 (input ya max Je yaani yotelezo:

<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>

Jifunze tena