前端表单校验需结合onblur实时验证与onsubmit兜底，配合正则区分字段、精准DOM反馈及异步处理；禁用JS后仍须服务端校验。
前端表单校验不能只靠 required 或 type="email"，这些只是基础拦截，真正要拦住无效提交，得靠 JavaScript 主动验证 + 用户反馈闭环。
onblur 触发校验比 onsubmit 更及时
用户填完用户名还没点提交，鼠标一移开就该提示——这是提升体验的关键节点。用 onblur 而不是等 onsubmit 才校验，能避免用户填完所有字段才发现第一项不合格。
-
document.getElementById("username").onblur = checkUsername是最常用绑定方式；别用onclick或oninput替代，前者太晚，后者太频（比如输一个字就报错） - 每个输入框需独立绑定，不能共用一个事件监听器再靠
event.target.id分流——容易漏绑或覆盖 - 注意：
onblur在用户用 Tab 键切换时也触发，符合真实操作流
正则校验要区分场景，别硬套“万能表达式”
用户名、密码、邮箱的校验逻辑完全不同，混用同一正则会埋坑。比如用邮箱正则去判手机号，或用密码长度规则去卡用户名，都会导致误伤。
- 用户名：
/^[a-zA-Z0-9_\u4e00-\u9fa5]{2,16}$/（支持中英文、数字、下划线，2–16位） - 密码：
/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d!@#$%^&*]{8,16}$/（大小写字母+数字，至少8位） - 邮箱：
/^[^\s@]+@[^\s@]+\.[^\s@]+$/（比 HTML5 原生type="email"更严格，排除test@.这类非法格式） - 别把正则写死在
test()里——提取成变量，方便复用和单元测试，例如：const regEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
校验失败后，DOM 操作必须精准定位提示元素
常见错误是校验函数返回 false，但页面没任何视觉反馈，用户以为“没反应”，其实是提示 标签没被找到或没更新 innerText。
- 每个输入框后面应有对应提示区域，命名建议统一：如
id="username_msg"、id="password_msg" - 校验函数内必须显式更新提示内容：
document.getElementById("username_msg").innerText = "用户名不能少于2位" - 别依赖 CSS 的
:invalid伪类做主提示——它不支持自定义文案，且 IE 完全不支持 - 清空输入时，建议同步清空提示：
oninput中判断值为空，就重置提示为 ""
提交前二次校验不可省，且要阻断默认行为
form.onsubmit 不是摆设。即使每项都 onblur 过，用户仍可能绕过（比如禁用 JS 后手动改 DOM），必须在提交瞬间兜底。
- 必须写
return false或event.preventDefault()，否则校验通过与否都不影响表单真实提交 - 不要只调用单个校验函数，应汇总所有字段结果：
if (!checkUsername() || !checkPassword() || !checkEmail()) return false; - 避免重复提交：校验通过后可临时禁用提交按钮，防止用户狂点 ——
document.getElementById("submit_btn").disabled = true
最容易被忽略的是异步校验场景（比如检查用户名是否已存在），这时 onblur 无法直接 return 布尔值，得用 loading 状态 + 回调更新提示，而不是卡住整个表单流程。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
