前端表单校验需用addEventListener('submit')拦截并preventDefault()，配合正则（如手机号/^1[3-9]\d{9}$/、邮箱/^[^\s@]+@[^\s@]+\.[^\s@]+$/、密码分项test）和精准错误反馈，但后端必须复现全部校验逻辑。
浏览器原生的 required、type="email" 这类校验只管“有没有填”和“像不像”，真要检查手机号格式、密码强度、两次输入一致，必须自己写 JavaScript 校验逻辑——而且得在用户提交前触发，不能等后端返回才提醒。
用 addEventListener('submit') 拦住表单提交
别用 onclick 绑定按钮，也别监听 blur 或 input 做实时校验（容易干扰用户输入节奏）。核心动作是拦截表单默认提交行为：
-
event.preventDefault()必须放在校验逻辑之前，否则页面会跳转或刷新 - 校验失败时，聚焦第一个出错的
<input>，比如firstInvalidInput.focus() - 不要直接
return false，现代写法统一用preventDefault()
示例：
document.querySelector('form').addEventListener('submit', function(e) {
if (!validatePhone(document.getElementById('phone').value)) {
e.preventDefault();
document.getElementById('phone').focus();
}
});
正则校验手机号、邮箱、密码强度的实际写法
别抄网上过时的手机号正则（比如还匹配 14 开头的虚拟号段），国内真实可用的规则得跟运营商号段同步更新。邮箱也不能只靠 /.+@.+\..+/ 这种弱匹配。
- 手机号：用
/^1[3-9]\d{9}$/覆盖当前主流号段，不验证归属地或是否真实存在 - 邮箱：至少含一个 @、前后非空、域名部分含点，
/^[^\s@]+@[^\s@]+\.[^\s@]+$/更稳妥 - 密码强度：要求大小写字母 + 数字 + 特殊字符至少三者，用四个
test()分开判断比写一个复杂正则更易维护
注意：正则末尾别加 g 标志，test() 会因 lastIndex 状态导致偶发失败。
立即学习“前端免费学习笔记（深入）”；
校验结果反馈要具体，别只弹 alert()
用户看到“请检查表单”这种提示等于没说。真实项目里，错误信息得绑定到对应字段旁，且支持清空重试：
- 每个
<input>后紧跟一个<span class="error"></span>，校验失败时填入文字，成功时清空 - 避免用
innerHTML插入未转义的用户输入，防止 XSS，纯提示文本用textContent - 提交失败后，别自动滚动到顶部，而是
element.scrollIntoView({ behavior: 'smooth', block: 'center' })定位到首个错误项
后端校验不可省，前端只是体验层
所有前端校验都可被绕过：禁用 JS、改 DOM、抓包重放。所以 fetch() 发送数据前做的校验，只是减少无效请求；后端接口仍需完整复现相同规则，包括长度、格式、唯一性（如用户名是否已存在）。
常见疏漏是“两次输入密码一致”这类逻辑：前端比对完，后端还得再取一次 password 和 confirm_password 字段做严格相等判断，不能只信前端传来的布尔值。
真正麻烦的是异步校验，比如用户名是否可用——得发请求查数据库，这时要加 loading 状态、防重复点击、处理网络超时，已经超出基础表单校验范畴了。
