用户名重名校验必须服务端实现，前端用fetch+abortcontroller防重复请求、setcustomvalidity接入表单验证、区分loading/success/error状态，接口须post且禁用cdn缓存。
用户名重名校验必须走服务端，前端只负责发请求、控状态、更新 UI。任何纯前端“查重”都可被绕过，毫无意义。
用 fetch + AbortController 防重复请求
用户快速输入时，旧请求还没返回，新请求又发出去，结果旧响应覆盖新判断——这是最常见错乱根源。
- 每次新校验前，先调用
abortController.abort()中止上一个 pending 请求 - 创建新
AbortController实例，并把signal传给fetch - 不要用
setTimeout模拟防抖，必须配合input事件 + 真实的请求取消逻辑 - 示例关键片段：
let abortController = null;<br>input.addEventListener('input', () => {<br> if (abortController) abortController.abort();<br> abortController = new AbortController();<br> fetch('/api/v1/users/username/available', {<br> method: 'POST',<br> headers: { 'Content-Type': 'application/json' },<br> body: JSON.stringify({ username: input.value }),<br> signal: abortController.signal<br> }).then(r => r.json()).then(data => { /* 更新状态 */ });<br>});
用 setCustomValidity() 接入原生表单验证流
浏览器不会自动把异步结果纳入 checkValidity() 判断，必须手动告诉它“这个字段现在到底合不合格”。
- 校验开始前：调用
input.setCustomValidity('')清空上次错误（否则会残留） - 校验失败时：调用
input.setCustomValidity('该用户名已被注册') - 校验成功时：仍需调用
input.setCustomValidity('')（空字符串 = 通过） - 注意：仅设置
setCustomValidity不够，提交前要触发一次input.reportValidity()或让表单调用checkValidity()才会重新评估
区分 loading / success / error 三种 UI 状态
用户停在输入框时，不能只显示“错误”或“正确”，中间等待期必须有明确反馈，否则会产生操作疑虑。
- 加一个
<span class="status"></span>元素紧贴输入框，统一控制文案和颜色 - loading 状态：文字设为“检测中”，加 CSS 类
is-pending显示旋转图标 - error 状态：文字为具体提示（如“该用户名已被注册”），类名
is-invalid - success 状态：文字为“可用”或留空，类名
is-valid，避免用绿色对勾干扰可读性 - 别依赖 HTTP 状态码做唯一判断：后端应统一返回 200，靠响应体
{ available: false }区分业务逻辑；409/422 等状态码仅作调试参考
最容易被忽略的是：后端接口必须用 POST 而非 GET，且请求体传参而非 query 参数——否则 CDN 可能缓存结果，或日志泄露用户名。前端节流阈值建议设为 300ms，但 blur 时应跳过节流立即校验，确保离开前得到最终结论。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
