JavaScript 验证 API

---

JavaScript 验证 API

在 JavaScript 的世界里，表单验证是一项非常重要的工作。为了帮助我们更方便地进行表单验证，JavaScript 提供了一些很有用的验证 API。今天，我们就来一起学习一下这些验证 API 的相关知识，让我们在处理表单数据时更加得心应手。

约束验证 DOM 方法

在 JavaScript 中，有一些 DOM 方法可以帮助我们进行表单的约束验证。下面为大家介绍两个常用的方法：

Property（属性）	Description（描述）
checkValidity()	这个方法用于检查 input 元素中的数据是否合法。如果数据是合法的，它就会返回 true；否则，返回 false。
setCustomValidity()	它可以用来设置 input 元素的 validationMessage 属性。通过这个方法，我们能够自定义错误提示信息，让提示更加符合我们的需求。

下面通过一个实例来看看 checkValidity() 方法的使用。在这个例子中，如果输入的信息不合法，就会返回相应的错误信息：

<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">验证</button>
<p id="demo"></p>
<script>
function myFunction() {
    // 获取 id 为 id1 的 input 元素对象
    var inpObj = document.getElementById("id1");
    // 检查输入数据是否合法
    if (inpObj.checkValidity() == false) {
        // 如果不合法，将错误提示信息显示在 id 为 demo 的段落中
        document.getElementById("demo").innerHTML = inpObj.validationMessage;
    }
}
</script>

在这个例子中，我们设置了 input 元素的类型为 number，并且规定了它的最小值为 100，最大值为 300，还设置了 required 属性，表示这个字段是必填的。当点击“验证”按钮时，myFunction 函数会被调用，检查输入的数据是否符合这些要求。

约束验证 DOM 属性

除了上述的方法，还有一些 DOM 属性也和表单的约束验证密切相关：

属性	描述
validity	这是一个布尔属性值，它会返回 input 输入值是否合法。通过这个属性，我们可以很方便地了解输入数据的有效性。
validationMessage	这个属性存储了浏览器的错误提示信息。当输入数据不合法时，我们可以通过它获取到浏览器给出的错误提示内容。
willValidate	它用于指定 input 是否需要进行验证。如果设置为 true，则会进行验证；如果设置为 false，则不会进行验证。

Validity 属性

input 元素的 validity 属性里面包含了一系列关于数据有效性的属性，这些属性可以帮助我们更细致地了解输入数据不符合要求的具体原因：

属性	描述
customError	如果设置了自定义的有效性信息，这个属性会被设置为 true。
patternMismatch	当元素的值和它的 pattern 属性不匹配时，这个属性会被设置为 true。比如我们规定输入的内容必须是某种特定格式的字符串，如果输入的内容不符合这个格式，就会出现这种情况。
rangeOverflow	如果元素的值大于我们设置的最大值，这个属性就会被设置为 true。
rangeUnderflow	当元素的值小于它的最小值时，这个属性会被设置为 true。
stepMismatch	如果元素的值不是按照我们规定的 step 属性来设置的，这个属性会被设置为 true。例如，我们设置了 step 为 5，那么输入的值应该是 5 的倍数，否则就会触发这个属性。
tooLong	要是元素的值超过了 maxLength 属性设置的长度，这个属性会被设置为 true。
typeMismatch	当元素的值不是我们预期的类型时，这个属性会被设置为 true。比如我们期望输入的是数字，但用户输入了字符串，就会出现这种情况。
valueMissing	如果元素设置了 required 属性，但是没有值，这个属性会被设置为 true。
valid	如果元素的值是合法的，这个属性会被设置为 true。

下面通过几个实例来看看这些属性的具体应用：

rangeOverflow 属性实例

在这个例子中，如果输入的值大于 100，就会显示一个信息：

<input id="id1" type="number" max="100">
<button onclick="myFunction()">验证</button>
<p id="demo"></p>
<script>
function myFunction() {
    var txt = "";
    // 检查输入值是否大于最大值，导致 rangeOverflow 属性为 true
    if (document.getElementById("id1").validity.rangeOverflow) {
        txt = "输入的值太大了";
    }
    // 将提示信息显示在 id 为 demo 的段落中
    document.getElementById("demo").innerHTML = txt;
}
</script>

rangeUnderflow 属性实例

在这个例子中，如果输入的值小于 100，并且是数字类型（先进行了数字类型的判断），就会显示相应的信息：

<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 = "你输入的不是数字";
    } 
    // 检查输入值是否小于最小值，导致 rangeUnderflow 属性为 true
    else if (inpObj.validity.rangeUnderflow) {
        txt = "输入的值太小了";
    } 
    // 如果输入合法
    else {
        txt = "输入正确";
    }
    // 将提示信息显示在 id 为 demo 的段落中
    document.getElementById("demo").innerHTML = txt;
} 
// 判断输入是否为数字的函数
function isNumeric(n) { 
    return!isNaN(parseFloat(n)) && isFinite(n); 
}
</script>