原生表单校验不支持异步阻塞，需通过submit事件中preventdefault()拦截默认行为，再分步执行本地校验、异步请求与状态更新，避免并发冲突和移动端兼容问题。
原生表单校验本身不支持异步阻塞——它天生是同步的，reportValidity()、checkValidity() 和 setCustomValidity() 都不会等待网络请求完成。所谓“同步阻塞校验”，其实是通过手动拦截 + 显式控制流程来模拟的，核心在于：不让浏览器走默认提交流程，而是由你全权决定何时放行。
必须在 submit 事件第一行调用 preventDefault()
这是所有可靠异步校验的前提。漏掉这一步，页面会立刻刷新或跳转，fetch 根本没机会执行。
- 错误写法：
if (valid) { fetch(...).then(() => form.submit()) }—— 没阻止默认行为，表单已提交 - 正确姿势：
e.preventDefault()必须是事件处理函数的第一行，雷打不动 - 只监听
form.submit，别用按钮onclick替代，否则无法触发原生 required/pattern 校验
分阶段验证：先本地，再异步，最后统一反馈
把校验拆成明确步骤，避免状态混乱：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 第一步：调
input.reportValidity()或form.checkValidity()，过滤掉格式错误、空值等基础问题 - 第二步：对需异步校验的字段（如用户名唯一性），先清空旧状态：
input.setCustomValidity('') - 第三步：发请求；成功 →
input.setCustomValidity('')；失败 →input.setCustomValidity('已被占用')再调input.reportValidity() - 第四步：仅当所有字段都通过（包括异步结果），才调
form.submit()或走后续逻辑
避免并发和残留状态导致的提示错乱
多个请求同时返回时，后发先至的回调可能覆盖前一个结果，造成提示与实际不符：
- 每次发起新请求前，清空上一次的
setCustomValidity()，并记录请求 ID 或 abortController - 响应回来时，先判断是否仍是最新请求，不是就忽略
- 用户快速切换焦点时，不要依赖
blur触发异步校验；统一收口到submit，辅以input或blur做轻量级本地反馈即可 - 移动端 Safari 对
checkValidity()时机敏感，建议在blur时也主动调一次并更新 UI 状态
pattern 和 type 属性要严格写，别被“看起来能用”骗了
它们只是第一道过滤，但默认宽松得离谱：
-
type="email"只认a@b.c就算合法，不能替代真实邮箱正则 -
pattern="[0-9]{4}"允许abc1234def—— 必须加锚点：pattern="^[0-9]{4}$" -
type="number"对粘贴字母不拦截，value可能为空字符串但checkValidity()还返回 true，需额外判非空
