setCustomValidity()在异步校验中不生效，因其仅为一次性快照，需配合preventDefault()、reportValidity()等手动控制验证流，且必须在请求前清空旧状态、严格锚定pattern、规避原生约束宽松缺陷。
原生校验 API 不能直接套用在异步、跨字段、服务端依赖的业务场景里，硬塞 setCustomValidity() 会失效或状态错乱——必须绕过浏览器默认触发时机，改为主动控制验证流。
为什么 setCustomValidity() 在异步校验中总是不生效
它不是“设了就立刻生效”的开关，而是浏览器在 submit 或 checkValidity() 调用时才读取的一次性快照。你在 fetch 回调里写 input.setCustomValidity('已存在')，此时表单早提交完了，或者用户焦点已移走。
- 错误现象：
validity.valid始终为true，即使后端返回失败；错误提示一闪而过或根本不出现 - 并发请求下，多个
setCustomValidity()调用相互覆盖，最后只保留最后一次结果 -
setCustomValidity('')没及时调用，导致上一次的错误文案残留，影响后续输入 - 用户点提交瞬间发起请求，但页面跳转或重定向已发生，回调根本没机会执行
如何用 reportValidity() + preventDefault() 实现可靠异步校验
核心是放弃“等浏览器自动触发”，改为监听 submit、手动阻断、分阶段验证：先本地规则，再发请求，最后决定是否放行。
- 给
<form></form>绑定submit事件，第一行就写e.preventDefault() - 对每个需异步校验的字段，先调
input.reportValidity()—— 这会触发 required/pattern/min/max 等原生校验，失败则中断流程 - 本地通过后，再发请求；成功且业务允许 →
input.setCustomValidity('')+form.submit()；失败 →input.setCustomValidity('错误文案')+input.reportValidity() - 务必在每次异步开始前清空旧状态：
input.setCustomValidity('')，否则残留错误会干扰新校验
pattern 和 type="email" 的坑怎么填
它们看着省事，实际宽松得离谱：type="email" 只认 a@b.c 就算合法；pattern="[0-9]{4}" 允许 abc1234def 过关——因为没锚定边界。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
- 严格邮箱校验别用
type="email"，改用type="text"+pattern="^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"+title="请输入正确邮箱" -
pattern必须加^和$，否则只做子串匹配 -
type="number"对粘贴字母完全不拦截，checkValidity()还可能返回true（显示为空但值为""），得配合min/max或额外 JS 判非空 -
novalidate属性只能加在<form></form>标签上，加在<input>上无效
动态字段、第三方组件、富文本怎么参与原生验证流
form.reset() 和 reportValidity() 都只处理初始 HTML 中存在的原生控件，Vue/React 渲染的输入框、contenteditable 区域、UEditor 富文本框全被忽略。
- 自定义元素（如
<my-input></my-input>）要参与验证，必须调用this.attachInternals()并设置formAssociated: true，否则form.elements里找不到它 - 动态插入的
<input>，需手动调input.setAttribute('name', 'xxx')并确保有required等约束属性，否则不被reportValidity()扫描 - 富文本编辑器内容需映射到隐藏
<input type="hidden">，并在 submit 前同步值、手动调hiddenInput.reportValidity() - reset 事件只能监听
<form></form>，不能监听按钮 click；想加确认弹窗或清理 editor，必须e.preventDefault()后再form.reset()
真正麻烦的从来不是写一行 setCustomValidity()，而是搞清浏览器什么时候读它、读谁的、读几次——异步校验的本质，是把验证从“声明式”拉回“命令式”，每一步都得自己掐时间点。
