JavaScript 验证 API
约束验证 DOM 方法
| 属性 | 描述 |
|---|
| checkValidity() | 返回 true，如果 input 元素包含有效数据 |
| 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() { var inpObj = document.getElementById("id1"); if (inpObj.checkValidity() == false) { document.getElementById("demo").innerHTML = inpObj.validationMessage; }}</script>亲自试一试
约束验证 DOM 属性
| 属性 | 描述 |
|---|
| validity | 包含与 input 元素的合法性相关的布尔属性。 |
| validationMessage | 包含当 validity 为 false 时浏览器显示的消息。 |
| willValidate | 指示是否验证 input 元素。 |
合法性属性
input 元素的 validity 属性包含了与数据合法性相关的一系列属性：
| 属性 | 描述 |
|---|
| customError | 设置为 true，如果设置自定义的合法性消息。 |
| patternMismatch | 设置为 true，如果元素值不匹配其 pattern 属性。 |
| rangeOverflow | 设置为 true，如果元素值大约其 max 属性。 |
| rangeUnderflow | 设置为 true，如果元素值小于其 min 属性。 |
| stepMismatch | 当字段拥有 step 属性，且输入的 value 值不符合设定的间隔值时，该属性值为 true。 |
| tooLong | 设置为 true，如果元素值超过了其 maxLength 属性。 |
| typeMismatch | 当字段的 type 是 email 或者 url 但输入的值不是正确的类型时，属性值为 true。 |
| valueMissing | 设置为 true，如果元素（包含 required）没有值。 |
| 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() { var txt = ""; if (document.getElementById("id1").validity.rangeOverflow) { txt = "值太大"; } document.getElementById("demo").innerHTML = txt;}</script> 亲自试一试
如果输入字段中的数字小于 100（input 元素的 min 属性），则显示一条消息：
rangeUnderflow 属性
<input id="id1" type="number" min="100"><button onclick="myFunction()">OK</button><p id="demo"></p><script>function myFunction() { var txt = ""; if (document.getElementById("id1").validity.rangeUnderflow) { txt = "值太小"; } document.getElementById("demo").innerHTML = txt;}</script>亲自试一试
