JavaScript怎么驗證API約束和驗證DOM

這篇文章主要介紹“JavaScript怎么驗證API約束和驗證DOM”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“JavaScript怎么驗證API約束和驗證DOM”文章能幫助大家解決問題。

JavaScript 驗證API中checkValidity使用

屬性 描述

checkValidity() 如果 input 元素包含有效數據，則返回 true。

setCustomValidity() 設置 input 元素的 validationMessage 屬性。

如果輸入字段包含無效數據，則顯示一條消息：

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。

valid 如果元素的值有效，則設置為 true。

實例

如果輸入字段中的數字大于 100（input 元素的 max 屬性），則顯示一條消息：

rangeOverflow 屬性

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

如果輸入字段中的數字小于 100（input 元素的 min 屬性），則顯示一條消息：

rangeUnderflow 屬性

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

關于“JavaScript怎么驗證API約束和驗證DOM”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。