JavaScript表单验证核心是“提前拦截+友好提示”，需阻止默认提交、检查必填项，结合正则实时校验、视觉反馈与错误聚合，并强调前端验证仅为体验优化，后端必须二次校验。
JavaScript 表单验证的核心是“提前拦截 + 友好提示”，不是等用户提交后再报错，而是在输入过程或提交瞬间实时检查，提升体验又保障数据质量。
基础必做：阻止默认提交 + 检查必填项
给表单绑定 submit 事件，调用 event.preventDefault() 阻止跳转；再遍历所有带 required 属性的字段，用 .value.trim() === '' 判断是否为空。空则聚焦该字段并提示，不继续提交。
- 别只靠 HTML 的
required属性——它只做基础校验，且样式和提示不可控 - 用
element.reportValidity()可触发原生校验气泡（兼容性好），但建议自定义提示更统一 - 对密码、邮箱等字段，优先用
type="email"、type="password"，浏览器会自动做初步格式识别
进阶技巧：正则 + 实时反馈 + 失焦校验
手机号、身份证、银行卡号等，用正则匹配比简单非空更可靠。例如手机号：/^1[3-9]\d{9}$/；邮箱：/^[^\s@]+@[^\s@]+\.[^\s@]+$/。把校验逻辑封装成函数，复用在输入中（input）和失焦（blur）时。
-
input事件适合做“边输边提示”（如密码强度、邮箱格式初判） -
blur事件更适合最终确认（如用户名是否已存在，需发请求） - 对敏感字段（如密码确认），在第二个密码框的
blur时比对两个值，不一致立刻标红并提示
用户体验关键：视觉反馈 + 错误聚合
别只弹 alert。给出错字段加 class="error" 改变边框颜色，下方插入 <small class="error-text">请输入正确的手机号</small>。提交失败时，把所有错误信息收集起来，顶部统一展示（比如用 <div id="form-error-summary"></div>）。
立即学习“Java免费学习笔记（深入）”；
- 校验通过后及时移除 error 类和提示文案，避免残留
- 用
aria-invalid="true"和aria-describedby提升无障碍访问支持 - 移动端注意：避免
focus()强制唤起键盘导致页面跳动，可改用滚动到错误区域element.scrollIntoView({ behavior: 'smooth' })
安全提醒：前端验证 ≠ 后端验证
JavaScript 验证纯属用户体验优化，所有数据仍可能被绕过。服务器端必须重新校验字段长度、类型、格式、业务规则（如余额是否充足、用户名是否唯一）。前后端正则尽量保持一致，减少歧义。
- 不要在前端暴露敏感逻辑，比如完整身份证校验规则或加密算法细节
- 防重复提交：提交后禁用按钮，并设
button.disabled = true，成功/失败后再恢复 - 涉及文件上传、富文本等内容，额外校验大小、类型、XSS 过滤，这些 JS 做不了，必须后端兜底
基本上就这些。不复杂但容易忽略的是节奏感——什么时候该即时反馈，什么时候该等失焦，什么时候该等提交汇总，拿捏好才显得专业又自然。
