HTML5自定义校验需用JavaScript统一管理状态与联动：封装checkValidity/setCustomValidity基线逻辑，跨字段比对用data-target解耦，异步校验加防抖与状态标记，通过data-validate自动注册校验器。
HTML5 自定义校验不能只靠 pattern 或 required 解决业务逻辑，比如“两次密码一致”“用户名是否已存在”“手机号与区号匹配”等，必须用 JavaScript 主动干预。但写一堆重复的 if-else 和 setCustomValidity() 很容易出错、难维护。要真正复用，关键不是封装一个“万能验证函数”，而是统一管理校验状态、输入联动和错误重置时机。
用 checkValidity() + setCustomValidity() 构建校验基线
每个带验证逻辑的表单项（如密码确认框）都应具备三个基础动作：触发校验、设错误提示、清空错误。把这些封装成可绑定到任意 input 的通用方法：
- 监听
input或blur事件，调用input.checkValidity()触发原生校验流程 - 失败时调用
input.setCustomValidity("提示文字")，成功时必须调用input.setCustomValidity("")—— 这一步极易被忽略，不重置会导致后续输入永远报错 - 避免在
submit事件里重复设置；浏览器已在提交前自动触发校验，JS 只需补足业务逻辑
跨字段比对用「字段引用」而非硬编码 ID
比如密码确认，不要写死 document.getElementById("pwd")，而是让确认框通过 data-target 属性声明它要对比的目标：
<input type="password" name="pwd_confirm" data-target="pwd">- 校验函数读取
this.dataset.target，再用form.querySelector('[name="' + targetName + '"]')定位主密码框 - 这样同一套函数可复用于“邮箱确认”“新密码 vs 旧密码”等多个场景，无需改逻辑
异步校验（如用户名查重）加状态标记与防抖
服务端查重不能阻塞用户输入，需明确区分“未校验”“检查中”“已失败”“已通过”四种状态：
立即学习“前端免费学习笔记（深入）”；
- 输入后先设
input.setCustomValidity("检查中...")，并添加 loading 类让 UI 可视化 - 发起请求前加简单防抖（如 300ms），避免每敲一个字就发一次请求
- 接口返回后，根据结果调用
setCustomValidity("")或setCustomValidity("已被占用") - 注意：如果用户在请求中修改了内容，要取消或忽略旧响应，只处理最新一次输入对应的返回
统一注册机制，让表单自动接管校验逻辑
不推荐手动给每个 input 写 addEventListener。可在表单初始化时扫描所有带 data-validate 属性的字段，按类型自动挂载对应校验器：
-
<input data-validate="match" data-target="pwd">→ 绑定匹配校验器 -
<input data-validate="remote" data-url="/api/check-username">→ 绑定远程校验器 - 每个校验器是一个独立函数，接收当前 input 和所属 form，返回 Promise 或布尔值
- 表单 submit 时遍历所有已注册字段，统一触发
checkValidity()，失败则reportValidity()
