JavaScript表单验证的核心是帮用户一次填对，通过原生属性打基础、JS增强实时反馈、避免打断式交互、服务端兜底校验。
JavaScript 表单验证的核心目标不是“拦住用户”，而是“帮用户一次填对”——通过即时反馈、清晰提示和合理容错，减少提交失败、避免页面刷新，让填写过程更自然、更高效。
用原生 HTML 属性打基础，轻量又可靠
别急着写 JS，先用好 required、type="email"、minlength、pattern 等原生属性。它们自带语义、兼容性好，且多数浏览器会触发默认校验 UI（如红边框、气泡提示）。
-
建议组合使用：比如邮箱字段写成
<input type="email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">，既利用浏览器识别，又补充正则增强校验精度 -
注意 pattern 不会自动加 ^$：需手动写完整匹配，否则
pattern="a"会误判 "abc" 为合法 -
用
title属性提供 pattern 失败时的友好提示：<input pattern="\d{6}" title="请输入6位数字验证码">
用 JavaScript 做增强：实时校验 + 智能提示
原生校验只在提交或失焦时触发，体验有延迟。JS 可实现输入中实时反馈（如密码强度条）、异步验证（如用户名是否已存在）、以及统一错误展示逻辑。
-
监听
input事件而非blur：对密码、手机号等字段，在用户打字时就做格式初筛，及时标出问题，但避免过度打扰（例如每输入1字符都弹窗） -
错误信息要具体、可操作：不说“格式错误”，而说“手机号应为11位数字，当前含字母‘a’”；不只标红边框，还在输入框下方显示
<small class="error">…</small> -
提交前做最终检查：调用
form.checkValidity()，再结合自定义规则（如两次输入密码是否一致），统一收集错误并滚动到首个问题字段
避免打断式交互，尊重用户控制权
验证不是为了“卡住”，而是降低认知负荷。很多体验差的表单，问题出在逻辑反直觉或行为不可预测。
立即学习“Java免费学习笔记（深入）”；
- 禁用提交按钮要谨慎：仅在表单明显无效（如必填项为空）时置灰，但保持可点击，并在 hover 时提示“请先填写带 * 的字段”；不要一进入页面就禁用
- 不强制格式化输入内容：比如自动给手机号加空格或横线，可能干扰复制粘贴或导致光标跳动；改用“展示层格式化 + 提交层清洗”策略
-
允许暂存不完整状态：用户切换标签页、临时离开时，未填完的字段值应保留；可用
localStorage缓存草稿，甚至恢复焦点位置
服务端永远是最后一道防线
前端验证可被绕过，所有关键校验（如唯一性、权限、业务规则）必须在服务端重复执行。JS 验证只是提升体验的“加速器”，不是“保险栓”。
- 前后端校验逻辑尽量一致：正则、长度限制、枚举范围等保持同步，避免前端提示“OK”后服务端返回 400
-
AJAX 验证失败时，把服务端返回的具体错误映射到对应字段：例如后端返回
{"errors": {"email": "该邮箱已被注册"}}，前端就定位到 email 输入框并显示该消息 - 网络异常也要有兜底：请求超时或 5xx 错误时，提示“网络不稳，请稍后再试”，而不是静默失败或报技术错误
