約束驗證 DOM 方法

PropertyDescription

checkValidity()	如果 input 元素中的數(shù)據(jù)是合法的返回 true，否則返回 false。
setCustomValidity()	設(shè)置 input 元素的 validationMessage 屬性，用于自定義錯誤提示信息的方法。 使用 setCustomValidity 設(shè)置了自定義提示后，validity.customError 就會變成true，則 checkValidity 總是會返回false。如果要重新判斷需要取消自定義提示，方式如下： setCustomValidity('') setCustomValidity(null) setCustomValidity(undefined)

checkValidity() 方法

input id="id1" type="number" min="100" max="300" required> <button οnclick="myFunction()">驗證</button><p id="demo"></p><script> function myFunction() {var inpObj = document.getElementById("id1");if (inpObj.checkValidity() == false) {document.getElementById("demo").innerHTML = inpObj.validationMessage;} } </script>

約束驗證 DOM 屬性

屬性描述

validity	布爾屬性值，返回 input 輸入值是否合法
validationMessage	瀏覽器錯誤提示信息
willValidate	指定 input 是否需要驗證

---

Validity 屬性

input 元素的 validity 屬性包含一系列關(guān)于 validity 數(shù)據(jù)屬性:

屬性描述

customError	設(shè)置為 true, 如果設(shè)置了自定義的 validity 信息。
patternMismatch	設(shè)置為 true, 如果元素的值不匹配它的模式屬性。
rangeOverflow	設(shè)置為 true, 如果元素的值大于設(shè)置的最大值。
rangeUnderflow	設(shè)置為 true, 如果元素的值小于它的最小值。
stepMismatch	設(shè)置為 true, 如果元素的值不是按照規(guī)定的 step 屬性設(shè)置。
tooLong	設(shè)置為 true, 如果元素的值超過了 maxLength 屬性設(shè)置的長度。
typeMismatch	設(shè)置為 true, 如果元素的值不是預期相匹配的類型。
valueMissing	設(shè)置為 true，如果元素 (required 屬性) 沒有值。
valid	設(shè)置為 true，如果元素的值是合法的。d

　　

<input id="id1" type="number" max="100"> <button οnclick="myFunction()">驗證</button> <p id="demo"></p> <script> function myFunction() { var txt = ""; if (document.getElementById("id1").validity.rangeOverflow) { txt = "輸入的值太大了"; } document.getElementById("demo").innerHTML = txt; } </script>

　

轉(zhuǎn)載于:https://www.cnblogs.com/tanlei-sxs/p/9831017.html

總結(jié)

以上是生活随笔為你收集整理的JavaScript 验证API的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。