原生表单校验需主动接管流程：用reportvalidity()+preventdefault()处理提交，setcustomvalidity()非响应式、需配合reportvalidity()触发提示，pattern须加^$锚定，移动端键盘行为不可靠，动态字段需弃用原生验证。
原生表单校验不是“加个 required 就完事”，它在真实业务里会立刻暴露三个硬伤：异步校验失效、跨字段逻辑无法表达、移动端 pattern 行为不一致。必须用 reportValidity() + preventDefault() 主动接管流程，否则用户提交后跳转了，错误回调根本没机会执行。
为什么 setCustomValidity() 在 fetch 后总不显示错误
它不是实时绑定的响应式属性，而是浏览器在 submit 或 checkValidity() 调用瞬间读取的一次性快照。你在 fetch().then() 里调 input.setCustomValidity('用户名已存在')，此时表单早已提交或页面已跳转。
- 必须在
form.addEventListener('submit', e => { e.preventDefault(); ... })中启动整个流程 - 每次发起新请求前，先清空旧状态：
input.setCustomValidity('') - 服务端返回失败后，要显式调用
input.reportValidity()才能触发气泡提示（仅设setCustomValidity()不会自动弹） - 并发校验时，多个
setCustomValidity()调用会相互覆盖，建议用AbortController取消上一个请求
pattern 和 type="email" 的宽松陷阱怎么填
浏览器对格式校验极其宽松：type="email" 只认 a@b.c 就算合法；pattern="[0-9]{4}" 允许 abc1234def 过关——因为没锚定边界，只做子串匹配。
- 严格邮箱必须用
type="text"+pattern="^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"（注意：^ 和 $ 是必需的，浏览器不会自动加） -
pattern不支持i标志，大小写敏感需手动写[a-zA-Z] - 中文字符必须显式写出范围，如
[\u4e00-\u9fa5a-zA-Z0-9]{2,10}，\w不匹配汉字 - 移动端软键盘行为不可靠：匹配
[0-9]大概率弹数字键盘，但匹配[a-z]不保证弹英文键盘
如何让校验在离开字段时就反馈（blur 实时校验）
原生机制默认只在 submit 触发，想实现失焦即校验，得手动调用 reportValidity()，但要注意 Firefox 不会自动滚动到错误字段，Chrome 会。
- 监听
input或blur事件，先清空旧态：input.setCustomValidity('') - 调用
input.checkValidity()判断是否通过（不弹提示），适合做逻辑分支 - 若失败，再调
input.reportValidity()弹出气泡（仅此一步才触发 UI 提示） - 避免在
input事件中高频执行正则——长文本每敲一字都跑一遍，iOS Safari 容易卡顿 - 对地址类字段，
required不防全角空格，应配合value.trim().length === 0做 JS 补充判断
最常被忽略的是动态字段和第三方组件：Vue/React 渲染的输入框不在初始 DOM 中，form.reset() 和 reportValidity() 都不识别它们；富文本编辑器输出的 HTML 更不可能参与原生验证流。这类场景必须彻底放弃原生 API，改用纯 JS 验证器 + 自定义错误容器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
