HTML 表单验证
学习表单验证 · 难度：进阶 · +15XP
表单验证
HTML5 内置了强大的表单验证功能，不需要JavaScript就能做基本校验。
内置验证属性
| 属性 | 作用 | 示例 | ||
|---|---|---|---|---|
| required | 必填，不能为空 | <input required> | ||
| minlength/maxlength | 最小/最大长度 | <input minlength=3> | ||
| min/max | 数值范围 | <input type=number min=1 max=100> | ||
| pattern | 正则表达式验证 | <input pattern="[0-9]{11}"> | ||
| type="email" | 邮箱格式 | 自动校验@符号 | ||
| type="url" | 网址格式 | 自动校验http:// |
示例：带验证的注册表单
<form>
<input type="text" required placeholder="用户名(必填)" minlength="3">
<input type="email" required placeholder="邮箱">
<input type="password" required minlength="6" placeholder="密码(至少6位)">
<input type="number" min="1" max="120" placeholder="年龄">
<button type="submit">注册</button>
</form>
使用 :valid 和 :invalid CSS伪类可以给验证状态添加视觉反馈。