HTML5原生表单校验关键在于合理组合type、required、pattern等属性：type决定校验逻辑，required需配合空值首项，pattern须加^$锚点和title，min/max/step仅对特定type生效。
直接用 HTML5 原生类型 + 对应校验属性，就能覆盖绝大多数表单场景，关键不是堆功能，而是选对组合、避开常见坑。
语义化 type 是校验的起点
type 不只是改键盘或样式，它决定了浏览器是否触发内置格式校验：
- email：自动检查基本邮箱结构（如包含 @ 和 .），允许 user@localhost 这类合法但非常规写法；不验证域名是否存在
- url：要求协议头（http:// 或 https://），不接受纯 example.com
- number：只允许数字输入，配合 min/max/step 才生效；text 类型加 min/max 完全无效
- date：强制 YYYY-MM-DD 格式，浏览器弹出日历控件，非法格式（如 2026-13-01）提交时直接报错
- tel：不校验格式，但移动端调起数字键盘；适合搭配 pattern 做手机号校验
required 要配“可为空”的首项才真正生效
select 下拉框加 required 不代表用户必须点选——如果第一个 option 有实际 value，用户可能根本没动就“绕过”了：
- 正确写法：
<select required><option value="" disabled selected>请选择</option> <option value="beijing">北京</option></select> - textarea 和 input 同样支持 required，别只盯着 input
- type="checkbox" 加 required 表示必须勾选，type="radio" 加 required 表示该组至少一个被选中
pattern 不是万能，但用对很省事
pattern 只在校验触发时（如 submit 或 checkValidity()）运行，不监听输入过程。它默认是子串匹配，容易误判：
立即学习“前端免费学习笔记（深入）”；
- 手机号要写
pattern="^1[3-9]\d{9}$"，不是[3-9]\d{9}；加 ^ 和 $ 锚点才能确保全长匹配 - 必须带 title 属性，否则错误提示是“请匹配所要求的格式”，用户看不懂
- Safari 旧版（iOS 10.3 之前）完全忽略 pattern，建议 type="tel" + pattern 组合兜底
- 密码强度用 pattern 可以，比如
pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}"，但别指望它实时反馈
长度与范围校验得看 type 是否支持
minlength/maxlength 对 input 和 textarea 都有效；min/max 只对 number、date、time、datetime-local 生效：
- 文本类密码字段用
minlength="8" maxlength="20" - 年龄用
<input type="number" min="1" max="120">，不要用 text + pattern 模拟 - 日期区间限制：
<input type="date" name="start" min="2026-01-01">，浏览器会禁用早于该日的选项 - step 对 number 和 range 有用，比如
step="0.5"允许输入小数，对 text 无效
