required仅校验非空，不校验格式；pattern自动锚定且不支持标志符；min/max/step在number与date中行为不同；setCustomValidity需手动清空；原生校验仅响应表单提交事件。
required 属性只检查是否为空，不校验内容格式
很多开发者以为加了 required 就能防止用户乱填，其实它只在提交时判断 input 的 value 是否为非空字符串（对 type="number" 还会额外忽略纯空格）。比如 <input type="email" required>，用户填 aaa 也能通过——因为 required 根本不看是不是邮箱格式。
真正触发邮箱格式校验的是 type="email" 本身，不是 required。两者是正交机制：一个管“有没有”，一个管“像不像”。
-
required对type="number"会拒绝空值和"abc"，但接受"123 "（尾部空格会被 trim） -
required对type="date"在未选日期时才报错；一旦选了，哪怕选的是"9999-99-99"（非法日期），也不会被拦截（浏览器不校验合法性） - 用 JavaScript 调用
checkValidity()时，required错误对应element.validity.valueMissing === true
pattern 属性依赖正则，但不支持 flags 和 ^$ 自动锚定
pattern 是唯一能自定义格式的原生属性，但它有硬限制：浏览器会自动把你的正则包进 ^...$，你不能写 ^ 或 $，否则直接失效（Chrome 报 Invalid regular expression）。
比如想限制 6–12 位字母数字，必须写 pattern="[a-zA-Z0-9]{6,12}"，不能写 pattern="^[a-zA-Z0-9]{6,12}$"；想排除开头为数字，得用负向先行断言 pattern="(?!\d)[a-zA-Z0-9]{6,12}"（注意双反斜杠转义）。
立即学习“前端免费学习笔记（深入）”；
- 所有主流浏览器都不支持
pattern中的i、m等 flag，大小写敏感靠自己写[a-zA-Z] - 中文字符需显式写入，如
pattern="[u4e00-u9fa5a-zA-Z0-9]{2,10}"，别指望w匹配汉字 - 移动端软键盘行为受
pattern影响：匹配[0-9]会弹出数字键盘，但匹配[a-z]不一定弹英文键盘（取决于系统）
min/max/step 对 number 和 date 类型的行为差异很大
min/max 在 type="number" 和 type="date" 上都可用，但校验时机与精度完全不同。
对 number：输入过程就实时限制（如设 min="10"，用户无法手动输入 9），且 step 会影响增减按钮和粘贴行为（粘贴 10.5 到 step="1" 的框里会被拒绝）；对 date：仅在提交或调用 checkValidity() 时校验，且 step 完全无效（HTML5 规范明确不支持 date 的 step）。
-
type="number" step="any"允许小数，但step="0.1"不等于“允许一位小数”——填1.01仍会失败 -
type="date" min="2023-01-01"的值必须是完整 ISO 格式字符串，传"2023-1-1"或"2023/01/01"都不触发校验（解析失败，value为空） - Firefox 对
number的min/max支持最严格，Chrome 允许临时输入超限值再修正
setCustomValidity() 覆盖原生错误但需手动清空
当需要补充原生验证覆盖不到的逻辑（比如两次输入密码不一致），必须用 setCustomValidity()。但它有个关键副作用：一旦设过非空字符串，该元素就永远处于 validity.customError === true 状态，直到你显式调用 setCustomValidity("")。
常见错误是只在出错时设提示，却忘了在输入变化后清空——导致用户改对了也一直红着报错。
- 推荐在
input或blur事件里统一处理：if (isValid) el.setCustomValidity(""); else el.setCustomValidity("两次输入不一致"); -
setCustomValidity("")不会重置其他校验状态（如required失败仍会显示原生提示），它只控制 customError 标志位 - 若同时存在多个校验失败，浏览器只显示第一个（按
validity属性顺序），customError 优先级低于valueMissing和typeMismatch
form.submit() 调用或 event.preventDefault() 后的手动提交完全不响应——这时候必须靠 checkValidity() 主动拉取状态。 
