无法直接用 setcustomvalidity 实现异步校验，因其为同步设计；需拦截表单提交、防抖触发异步查重、动态设置 validity，并配合 ui 反馈与标准化接口响应。
直接用 setCustomValidity 做异步校验不行，因为它的设计是同步的——浏览器只在表单提交或调用 checkValidity() 时读取当前设置的错误消息，而不会等待异步请求完成。所以必须配合手动控制验证状态、延迟提交、以及输入防抖等策略来实现“用户名是否已注册”的异步校验。
1. 禁用原生 submit 行为，改用手动触发验证
避免用户点击提交后浏览器立即按同步规则校验（此时异步结果还没回来），应拦截表单默认提交，先完成异步检查再决定是否放行。
- 给表单加
onsubmit="return false"或用event.preventDefault() - 提交按钮改为调用自定义函数，例如
handleSubmit() - 该函数中先对用户名字段调用
checkValidity()（触发布局级校验，如required、pattern），再发起异步请求
2. 输入时防抖 + 异步查重 + 动态设置 validity
在用户名 input 或 blur 时发起请求，但不能每次按键都发。推荐用防抖（如 300ms），并注意：请求期间可临时设为“待验证”，请求返回后再调用 setCustomValidity。
- 初始状态：清空错误
input.setCustomValidity('') - 请求中：设为
input.setCustomValidity('正在检查...')（注意：这会让checkValidity()返回false，需配合 UI 提示） - 成功响应为“已存在”：设为
input.setCustomValidity('该用户名已被注册') - 成功响应为“可用”或失败（网络问题）：设为
input.setCustomValidity('')（清空，表示通过）
3. 后端接口建议返回标准结构
前端统一处理响应，降低判断复杂度。例如：
{
"available": false,
"message": "用户名已被占用"
}
这样前端只需判断 res.available === false 就设错误，否则清空；不需要解析 HTTP 状态码或自定义错误字段。
4. 配合 UI 反馈提升体验
setCustomValidity 本身不显示提示，需额外控制样式或提示元素：
- 监听
input.validity.customError或用input.checkValidity()判断状态 - 根据结果切换图标（✅ / ❌）、显示/隐藏提示文字、添加
errorclass - 提交时若仍处于“正在检查”状态，应禁用按钮并提示“请稍候”
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
