API ng Validation ng JavaScript
- 上一页 API Storage
- 下一页 API Web
Mga paraan at katangian ng DOM na pangkukunan ng walang kalinang
Paraan
Paraan | 描述 |
---|---|
checkValidity() | Ibalik ang true kapag ang elemento ng input ay mayroong walang kalinang datos. |
setCustomValidity() | Itataas ang atributo ng validationMessage ng elemento ng input. |
屬性
屬性 | 描述 |
---|---|
validity | Nakakabit ang boolean na katangian na may kaugnayan sa walang kalinang ng elemento ng input. |
validationMessage | Nakakabit ang mensahe na ipapakita ng browser kapag ang walang kalinang ito ay nasa False. |
willValidate | Ipinapakita kung gagamitin ang pag��证 ng elemento ng input. |
Halimbawa - paraan ng checkValidity()
Kung ang pinagpalitan ng input ay mayroong walang kalinang datos, ipapakita ang isang mensahe:
<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>
有效性屬性
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 屬性
如果 input 字段中的數字大於 100(input 的 max
属性),則顯示一條消息:
<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>
rangeUnderflow 屬性
如果 input 字段中的數字大於 100(input 的 max
属性),則顯示一條消息:
<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>
- 上一页 API Storage
- 下一页 API Web