网页表单校验：HTML文档结构里的验证属性

HTML表单验证属性必须嵌套在<form>内且由type="submit"触发才生效；required失效多因控件未包含在form中或按钮类型错误；pattern自动添加^$且仅对文本类input有效；min/max在number和date上行为不同；setCustomValidity需手动清空否则永久无效。

HTML 表单验证属性必须嵌套在 <form> 内、由 type="submit" 触发，脱离这个上下文就完全不生效。

required 不起作用？先看是不是丢在 <form> 外面

加了 required 却没报错，90% 是因为输入控件没包进 <form> 标签，或者提交按钮用了 type="button"。浏览器只在原生 submit 事件中检查 required，不依赖 JS 就跑，但前提是结构合法。

• <input required> 必须是 <form> 的直接或间接子元素
• 触发提交的按钮得是 <button type="submit"> 或 <input type="submit">，type="button" 点了也白点
• 用 JS 调 form.submit() 会触发验证；但用 element.click() 模拟点击 type="button" 就不会
• display: none 隐藏的 required 字段仍参与校验；要用 hidden 属性或移除 DOM 才跳过

pattern 正则写不对？记住它自动加 ^$ 且不支持 flag

pattern 只对 type="text"、"email"、"tel" 等文本类类型有效，type="number" 上写了也忽略。而且浏览器会悄悄把你的正则包进 ^...$，你再写 ^ 或 $ 就直接报 Invalid regular expression。

• 想限制 6–12 位字母数字：pattern="[a-zA-Z0-9]{6,12}" ✅，不是 ^[a-zA-Z0-9]{6,12}$ ❌
• 想排除开头为数字：pattern="(?!d)[a-zA-Z0-9]{6,12}"（注意 JS 字符串里要双反斜杠）
• 中文必须显式写出范围：pattern="[u4e00-u9fa5a-zA-Z0-9]{2,10}"，w 不匹配汉字
• 移动端软键盘会响应 pattern：写 [0-9] 弹数字键盘，但 [a-z] 不保证弹英文键盘

min/max 在 number 和 date 上表现完全不同

min 和 max 看似一样，实际行为割裂严重。对 type="number" 是实时拦截（输 9 到 min="10" 的框里会被卡住），而对 type="date" 只在提交时校验，且 step 完全无效。

立即学习“前端免费学习笔记（深入）”；

• type="number" min="10"：用户无法手动输入小于 10 的值，粘贴 "5" 会被清空
• type="date" min="2023-01-01"：选 “9999-99-99” 不报错（浏览器不校验日期合法性），只校验字符串格式是否为 ISO（"2023-1-1" 或 "2023/01/01" 都解析失败，value 变空，触发 valueMissing）
• step="any" 允许任意小数；step="0.1" 不代表“最多一位小数”，填 1.01 仍失败
• type="date" 的 min/max 值必须是完整 YYYY-MM-DD 格式，少一位都不行

setCustomValidity 后忘了清空？字段就永远 invalid

只要 setCustomValidity("xxx") 的参数是非空字符串，该字段就永久判定为无效——哪怕用户已填对内容。这是最容易被忽略的坑，导致表单死活提交不了。

• 每次输入后都必须调一次 input.setCustomValidity("")，否则错误状态残留
• 监听 input 或 blur 事件重置，别只在 invalid 里设错误却不清理
• 多个关联字段（如密码确认）要分别调 setCustomValidity，只在一个上设，另一个照样通过
• 用 event.preventDefault() 拦 invalid 事件时，必须配 setCustomValidity，否则字段一直卡在 invalid 状态

原生验证只管提交那一刻的状态，不监控中间过程；所有 pattern、min、required 都依赖用户最终触发 submit，服务端校验一步都不能省。