JavaScript 验证 API|JavaScript 教程

JavaScript 验证 API
约束验证 DOM 方法

|Property	|Description|
|-----|
|checkValidity()|	如果 input 元素中的数据是合法的返回 true，否则返回 false。|
|setCustomValidity()	|设置 input 元素的 validationMessage 属性，用于自定义错误提示信息的方法。<br>使用 setCustomValidity 设置了自定义提示后，validity.customError 就会变成 true，checkValidity 总是会返回 false。如果要重新判断需要取消自定义提示，方式如下：<br>setCustomValidity('') <br>setCustomValidity(null) <br>setCustomValidity(undefined)|
以下实例如果输入信息不合法，则返回错误信息：

checkValidity() 方法
```
<input id="id1" type="number" min="100" max="300" required>
<button onclick="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 属性包含一系列关于 validity 数据属性:

rangeOverflow 属性
```
<input id="id1" type="number" max="100">
<button onclick="myFunction()">验证</button>
 
<p id="demo"></p>
 
<script>
function myFunction() {
    var txt = "";
    if (document.getElementById("id1").validity.rangeOverflow) {
       txt = "输入的值太大了";
    }
    document.getElementById("demo").innerHTML = txt;
}
</script>
```
如果输入的值小于 100，显示一个信息：

rangeUnderflow 属性
```
<input id="id1" type="number" min="100" required>
<button onclick="myFunction()">OK</button>
 
<p id="demo"></p>
 
<script>
function myFunction() {
    var txt = "";
    var inpObj = document.getElementById("id1");
    if(!isNumeric(inpObj.value)) {
        txt = "你输入的不是数字";
    } else if (inpObj.validity.rangeUnderflow) {
        txt = "输入的值太小了";
    } else {
        txt = "输入正确";
    }
    document.getElementById("demo").innerHTML = txt;
}

// 判断输入是否为数字

function isNumeric(n) {
    return !isNaN(parseFloat(n)) && isFinite(n);
}
</script>
```