JavaScript表单验证必须拦截submit事件并手写逻辑，优先用addEventListener('submit')阻止默认提交，配合正则校验（如邮箱、手机号、密码）、实时与提交时双重验证，并善用setCustomValidity/reportValidity API。
JavaScript 表单验证不能只靠 required 或 pattern 属性糊弄，浏览器原生校验太弱、样式难控、错误提示不灵活，真要保障数据质量得手写逻辑。
用 addEventListener('submit') 拦截表单提交
这是最基础也最关键的一步：不拦截就直接提交了，验证等于白写。
- 必须在
form元素上监听submit事件，不是按钮的click - 第一时间调用
event.preventDefault()，否则页面会刷新或跳转 - 验证失败时别忘了给用户反馈（比如聚焦第一个错误字段、显示红色提示）
- 验证通过才允许执行真实提交逻辑（如
fetch发请求）
示例：
document.querySelector('form').addEventListener('submit', function(e) {
e.preventDefault();
if (validateForm()) {
// 提交数据
}
});
邮箱、手机号、密码强度等常用规则怎么写正则
正则不是越长越准，而是要兼顾可读性、兼容性和实际覆盖场景。
- 邮箱推荐用
/^[^\s@]+@[^\s@]+\.[^\s@]+$/—— 不追求 RFC 5322 全兼容，避免漏掉常见邮箱如name+tag@gmail.com - 手机号建议按中国区号写死：
/^1[3-9]\d{9}$/，别用\d{11}，它会匹配00000000000 - 密码强度至少含大小写字母 + 数字（不要强制符号）：
/(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}/ - 所有正则记得加
^和$，否则"abc123@test"也能过邮箱校验
实时验证（input / blur）和提交时验证的区别
两者目的不同，混用反而增加 Bug 风险。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
立即学习“Java免费学习笔记（深入）”；
-
input事件适合做“打字中提示”，但别每键都发请求或跑复杂逻辑，防抖是必须的（如延迟 300ms） -
blur更适合单字段校验完成态，比如邮箱输完失焦立刻标红/打勾 - 提交时验证是兜底，必须覆盖所有字段，且要重新运行全部规则（因为用户可能绕过实时校验直接点提交）
- 注意：移动端
input在中文输入法下会触发多次，用event.isComposing过滤未完成输入
用 setCustomValidity() 和 reportValidity() 配合原生 UI
想复用浏览器默认气泡提示又不想被它的样式和时机绑架？这两个 API 是折中解。
-
input.setCustomValidity('用户名不能为空')设置错误消息，空字符串表示“通过” - 调用
input.reportValidity()会立即触发校验并显示气泡（可用于单字段手动校验） - 整个表单调用
form.reportValidity()等价于点击提交但不触发 submit 事件 —— 适合在按钮上做“检查再提交” - 注意：一旦设过
setCustomValidity，不重置为空字符串，后续reportValidity永远报错
容易被忽略的是：这些 API 在 Safari 上对自定义元素支持差，且无法修改气泡位置和样式。真要统一体验，还是得自己渲染错误提示 DOM。
