深入理解HTML表单校验机制与流程-html教程-PHP中文网

原生表单校验需明确触发时机与状态流转，仅submit事件触发批量校验；required仅判空、pattern对number等类型无效且自动加^$；实时反馈须手动调checkvalidity()和reportvalidity()；validity对象的12个属性才是校验依据。

深入理解html表单校验机制与流程

原生表单校验不是“加了属性就自动生效”，它有一套明确的触发时机、状态流转和浏览器干预逻辑。没搞清这套机制，required 会像没写一样，pattern 会始终不报错，setCustomValidity 会卡死提交。

submit 事件是原生校验的唯一默认触发点

浏览器只在 form 元素收到 submit 事件时，才批量检查所有子控件的 validity 状态。这包括：button type="submit"、input type="submit"，或用户按回车（前提是焦点在可提交控件上）。用 form.submit() 调用 JS 方法、或 button type="button" 绑定 click 后手动提交，都会跳过全部原生校验。

required 只判断是否为空（valueMissing），不校验内容格式；空格字符串对 type="text" 算“已填”，但对 type="number" 会被 trim 后判空
type="email" 的校验极宽松：只要含一个 @ 和至少一个 .（如 a@b.c 或 user@localhost）就通过，真要校验邮箱必须配 pattern
提交前若某字段 validity.valid === false，浏览器会阻止提交，并在第一个失败字段聚焦、弹出气泡提示（Chrome 行为；Firefox 不自动滚动）

pattern 属性只对部分 type 生效且有隐式边界

pattern 实际只作用于 type="text"、"search"、"tel"、"url"、"email"、"password" 这几类。它对 type="number"、"date"、"checkbox" 完全无效——这些类型有自己的解析逻辑，pattern 被忽略。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

浏览器会自动给你的正则加上 ^ 和 $，所以写 pattern="[a-z]{3,}" 即可，别写 pattern="^[a-z]{3,}$"，否则 Chrome 会报 Invalid regular expression
中文需显式包含 Unicode 范围，w 不匹配汉字；正确写法如 pattern="[u4e00-u9fa5a-zA-Z0-9]{2,10}"
想排除开头数字？用负向先行断言：pattern="(?!\d)[a-zA-Z0-9]{6,12}"（注意 JS 字符串里双反斜杠）

实时反馈必须手动调用 checkValidity() 和 reportValidity()

原生校验默认不监听 input 或 blur，要实现输入中提示，得自己接管流程：

监听 input 事件，在回调里调 element.checkValidity() 判断当前值是否合法
用 element.setCustomValidity("") 清空旧错误（否则即使输对了也一直报错），校验失败时再设具体错误字符串
调 element.reportValidity() 才能强制弹出浏览器默认气泡——但它不保证滚动到该字段，也不统一跨浏览器行为
更稳妥的做法是：自己读取 element.validationMessage，渲染到旁边 <span class="error"></span> 里，用 CSS 控制显隐

invalid 事件和 validity 对象才是调试关键

不要靠 value === "" 判断必填，而应查 element.validity.valueMissing；不要靠正则 test 结果，而应看 element.validity.patternMismatch。整个 validity 对象暴露了 12 个布尔属性，每个对应一类失败原因：