JavaScript 验证 API

什么是验证 API

HTML5 为表单元素提供了"约束验证 API"（Constraint Validation API）：不必手写大量 if 判断，就能调用 checkValidity()、访问 validity 对象，自动检查 required、pattern、min/max 等约束是否满足。

HTML5 内置约束属性

先在 HTML 上声明约束，浏览器就"知道"规则了：

<input type="email" id="mail" required>
<input type="number" id="age" min="1" max="120" required>
<input type="text" id="code" pattern="[0-9]{6}" required>

checkValidity() 检查是否合法

调用元素或表单的 checkValidity()，全部满足返回 true，否则返回 false 并自动弹出浏览器的默认提示：

var age = document.getElementById("age");
console.log(age.checkValidity()); // 输入 150 时输出：false（超出 max）
var form = document.getElementById("myForm");
if (!form.checkValidity()) {
    console.log("表单尚有内容不合法");
}

validity 对象属性详解

访问 validity 能得知具体"不满足哪一条"，常用属性见下表：

属性	含义	触发条件
valueMissing	值为空	必填项 required 没填
typeMismatch	类型不匹配	type="email" 却填了非邮箱
tooShort / tooLong	太短 / 太长	长度超出 minlength / maxlength
rangeUnderflow / rangeOverflow	太小 / 太大	数字超出 min / max
patternMismatch	格式不匹配	不满足 pattern 正则
valid	是否全部通过	以上都不成立时为 true

用 validity 给出自定义提示

利用 validity 对象可以写出具体的错误文案：

var code = document.getElementById("code");
if (!code.checkValidity()) {
    if (code.validity.valueMissing) {
        console.log("验证码不能为空");
    } else if (code.validity.patternMismatch) {
        console.log("验证码须为 6 位数字");
    }
}
// 输入 "abc" 时输出：验证码须为 6 位数字

setCustomValidity() 自定义错误

内置规则满足不了需求时，可以用它设置自定义的"非法"理由：

var pwd = document.getElementById("pwd");
if (pwd.value === pwd.value.toLowerCase()) {
    pwd.setCustomValidity("密码必须包含大写字母");
} else {
    pwd.setCustomValidity(""); // 合法时清空自定义错误
}
console.log(pwd.checkValidity()); // 全小写时输出：false

注意：设置自定义提示后该元素就处于"不合法"状态，记得在条件满足时重新设回空字符串。

小结

验证 API 用"声明式约束 + checkValidity()/validity"把常见校验标准化；需要额外规则时用 setCustomValidity() 扩展，代码比手写一长串 if 判断更简洁、更可靠。