JavaScript表单验证的核心是协助用户快速发现并修正问题，而非拦截操作；应结合HTML5原生属性、CSS伪类、JS增强逻辑、友好提示、可访问性及服务端双重校验。
JavaScript 表单验证的核心不是“拦住用户”，而是“帮用户快速发现并修正问题”。友好校验的关键在于：实时提示、明确错误、不打断操作、视觉清晰。
用 HTML5 原生属性打基础
别急着写 JS，先用好 required、type="email"、minlength、pattern 等属性。浏览器会自动触发基础验证，并在 input.reportValidity() 时统一反馈。
-
—— 自动识别邮箱格式，提交时高亮+默认提示 -
—— 自定义正则，title内容会作为气泡提示 - 配合
:valid/:invalidCSS 伪类，可实时改变边框/图标颜色
用 JavaScript 增强体验和逻辑校验
原生验证不够用？比如确认密码一致、手机号归属地判断、用户名是否被占用——这些得靠 JS。重点是：只在必要时机校验，不每敲一个字都报错。
- 监听
blur（失焦）事件做单字段校验，避免干扰输入过程 - 监听
input事件做轻量反馈（如实时显示密码强度），但不标红或阻断 - 提交时调用
form.checkValidity()先走原生检查，再执行自定义逻辑（如异步查重） - 校验失败后，用
input.setCustomValidity("用户名已被注册")覆盖默认提示，再调用reportValidity()
让错误提示真正“友好”
用户看到“Invalid email”不如看到“邮箱格式不对，例如 name@domain.com”。提示要具体、位置要靠近出错字段、样式要一眼识别。
立即学习“Java免费学习笔记（深入）”；
- 每个输入框下方预留
，JS 动态填入文字，不用 alert 或 console - 聚焦第一个错误字段：
document.querySelector('.error-input')?.focus()，方便键盘用户继续操作 - 成功校验后，清除自定义错误：
input.setCustomValidity("")，否则后续 submit 会一直失败 - 避免红色 ❌ 图标堆满页面，可用绿色对勾 ✅ 配合淡入动画表示“已通过”
兼顾可访问性与降级体验
不是所有用户都开 JS，也不是所有屏幕阅读器都能读动态插入的提示。所以结构和语义不能省。
- 用
aria-invalid="true"和aria-describedby="error-id"关联提示文案，读屏器能读到 - 错误提示
必须有唯一 ID，并被 input 正确引用 - 服务端必须重新验证——前端校验纯为体验优化，不可信任
- 禁用提交按钮时，加上
aria-busy="true"和加载状态文案，避免用户反复点击
基本上就这些。不复杂，但容易忽略细节。把验证当成“协助输入的助手”，而不是“守门的保安”，用户自然觉得顺手。
