html5表单验证不触发的根本原因是控件缺少required等约束、type属性不匹配校验规则，或js拦截submit后未调用checkvalidity()；需确保按钮为type="submit"，正确使用setcustomvalidity("")重置状态，并在可见可交互元素上调用reportvalidity()。
HTML5表单验证不触发，submit 事件直接走了
根本原因通常是表单控件没写 required、type 不匹配校验规则，或者用了 event.preventDefault() 却没手动调用 checkValidity()。浏览器只在原生提交流程中自动触发验证，一旦用 JS 拦截又没补上校验逻辑，就等于绕过了整套机制。
常见错误现象：input 值为空却直接提交；type="email" 输入了 "abc" 也没报错；点击按钮后控制台无提示、页面跳转或接口发出去了。
- 确保每个需要校验的字段都显式声明约束，比如
required、minlength="6"、pattern="^[a-z]+$" -
type属性必须和语义一致：邮箱必须用type="email"，数字用type="number"，否则浏览器不按对应规则校验 - 如果监听了
form.addEventListener("submit", e => { ... })，记得开头加if (!e.target.checkValidity()) return e.preventDefault(); - 避免在
input上写oninput="this.form.reportValidity()"这类写法——它只报告不阻断，且频繁触发影响体验
reportValidity() 调用无效或没反应
这个方法本身不会自动阻止表单提交，它只是触发一次校验并显示默认气泡提示。如果没看到提示，大概率是 CSS 把 :invalid 样式覆盖了，或者元素被设为 display: none / visibility: hidden ——隐藏状态下浏览器不渲染验证气泡。
使用场景：适合在按钮点击后手动触发校验，比如“下一步”不是 submit 类型按钮时。
立即学习“前端免费学习笔记（深入）”；
- 必须在元素处于可交互状态下调用：
input.reportValidity()对隐藏或 disabled 元素无效 - 不要对整个
form调用reportValidity()后就以为万事大吉——它只检查所有字段，但不会聚焦第一个错误项，用户可能看不到提示 - 若自定义了
::-webkit-validation-bubble或重置了outline，气泡可能被压住或透明，建议先关掉相关样式测试 - Firefox 下需注意：某些旧版本对
reportValidity()支持不稳定，优先用checkValidity()+ 手动提示
自定义验证消息不生效（setCustomValidity）
setCustomValidity() 是唯一能改写默认提示文字的方法，但它有个关键前提：只要参数是非空字符串，该字段就始终被视为无效；只有传空字符串（""），才会恢复“有效”状态。很多人忘了清空，导致字段永远标红、永远报错。
参数差异明显：setCustomValidity("用户名已存在") → 字段变 invalid；setCustomValidity("") → 才可能变 valid。
- 每次修改值后都要重新判断并调用
setCustomValidity()，不能只在初始化时设一次 - 别在
input的blur里异步校验完再设消息——AJAX 返回前用户可能已点提交，此时消息还是旧的 - 配合
addEventListener("invalid", ...)可捕获校验失败时机，但注意它不冒泡，得绑在具体 input 上 - 移动端 Safari 对
setCustomValidity()的兼容性较好，但部分安卓 WebView 会忽略自定义消息，只显示默认文案
submit 按钮 type 写成 button 导致验证失效
这是最隐蔽也最高频的问题之一。如果按钮写的是 <button type="button">提交</button>，哪怕它在 form 里面，点击也不会触发任何 HTML5 验证逻辑——因为浏览器根本不把它当“提交按钮”处理。
性能影响几乎为零，但行为完全错位：用户以为点了提交，其实只是执行了 JS，连 invalid 事件都不会发。
- 务必确认按钮是
<button type="submit"></button>或<input type="submit"> - 如果用了框架（如 React），注意 JSX 中
type默认是"button"，不写会出事 - 禁用按钮时用
disabled，别用type="button"来“假装”不可点——那等于主动放弃验证 - Form 外部的按钮想触发表单验证？可以调用
formElement.requestSubmit()（现代浏览器支持），比submit()更安全，它会走完整验证流程
真正麻烦的不是写不对，而是验证失败时用户没感知到哪错了——气泡被遮、焦点没跳、错误消息藏在 console 里。多在真机上点几次，别只靠桌面 Chrome 看效果。
