找回密码需多层验证：前端用type="email"校验格式、按钮禁用防重复提交、错误提示精准映射字段；密码确认需实时比对；后端必须校验邮箱注册状态、token有效期及密码强度，缺一不可。
找回密码不是单纯写个表单就完事——用户卡在哪个环节，取决于你漏掉了哪一层验证逻辑。
邮箱输入框必须带 type="email" 且校验前端格式
很多人只加了 required，结果用户输 user@domain 或 user@.com 也能提交。浏览器原生的 type="email" 会触发基础正则校验（如必须含 @、不能以 @ 结尾），比手写 JS 更可靠也更轻量。
- 必须写
<input type="email" name="email" required>，别用text - 不要依赖 placeholder 提示格式，它不阻止非法输入
- 如果后端用 PHP/Node.js，仍需服务端再次校验——前端可绕过
提交按钮要禁用 + 加载态，防重复点击
用户点一次没反应，再猛点两下，后端可能发三封验证码邮件，或触发风控限流。关键不是“美化”，是阻断无效请求。
- JS 中点击后立即设
button.disabled = true - 同时改文案为
button.textContent = "发送中..." - 成功或失败后才恢复：重置
disabled和文案，否则用户无法重试
后端返回错误时，error 字段要映射到对应字段
常见错误是把所有提示塞进一个全局 <div class="msg">，用户输错邮箱、输错验证码、链接过期全显示同一行红字，根本分不清该改哪。
立即学习“前端免费学习笔记（深入）”；
- 后端返回 JSON 应含明确字段，例如：
{"error": {"email": "邮箱未注册", "token": "验证码已失效"}} - 前端用字段名匹配 DOM 的
name或id，精准插入提示 - 清空旧提示再写新提示，避免残留错误信息干扰下一次提交
重置密码页的 password 和 confirm_password 必须实时比对
很多表单等提交后才校验两次输入是否一致，用户填完六位密码、再输一遍确认，结果提示“两次输入不一致”——体验断层。应该在第二个输入框 oninput 时立刻反馈。
- 监听
confirm_password的input事件 - 比对
password.value === confirm_password.value，不等就加setCustomValidity("两次输入不一致") - 相等时调用
confirm_password.setCustomValidity("")清除错误 - 注意：仅前端比对不够，后端仍需校验，防止绕过
最常被跳过的其实是 token 有效期校验和密码强度策略——它们不在表单 HTML 里，但缺一不可。表单只是入口，背后每一步都得有对应防护，否则“找回”就变成了“被找回”。
