HTML 约束验证 API

Constraint Validation API(原生表单验证/无JS)：validity属性对象（valid/valueMissing/typeMismatch/patternMismatch/tooLong/tooShort/rangeOverflow/rangeUnderflow/stepMismatch/badInput/customError）、setCustomValidity自定义 · 难度：入门 · +10XP

HTML 约束验证 API —— 不用JS也能验证表单

前端表单验证以前全要靠JavaScript。HTML5提供了原生表单验证，大部分场景不需要写JS。

常用验证属性

<input type="email" required placeholder="请输入邮箱">
<input type="text" minlength="3" maxlength="20">
<input type="number" min="1" max="100">
<input type="text" pattern="[0-9]{6}" title="请输入6位数字">

用JS读取验证状态

const input = document.querySelector('input');
console.log(input.validity.valid);       // 是否通过验证
console.log(input.validity.valueMissing); // 是否为空
console.log(input.validity.typeMismatch); // 类型不匹配
input.setCustomValidity('自定义错误信息');

validity对象全部属性

动手练习

1. 基础练习：做注册表单——用户名(3-20字符)、邮箱、密码(6位+)、手机号，全部用HTML5验证属性。
2. 进阶应用：用JS读取validity对象，在输入框下方实时显示红色错误提示。
3. 项目实战：做密码强度指示器——实时检测密码强度，用progress条显示。