pattern属性仅在表单提交或调用checkValidity()时生效，因它不监听输入过程，且需配合required使用；实时校验须用JavaScript监听input和blur事件并调用setCustomValidity。
pattern 属性为什么只在提交时生效
因为 pattern 是 HTML5 原生约束机制的一部分，它不监听输入过程，只在调用 checkValidity() 或表单触发 submit 事件时才执行校验。浏览器不会主动为每次按键做正则匹配——这既是性能考虑，也是规范限定。
常见错误现象：写了 pattern="[a-z]{3}"，但用户输到第 2 个字母时没提示，输完第 4 个才报错；或者输错后删掉重输，错误状态还残留。
- 必须搭配
required才会真正参与校验流程，否则空值也能通过 -
pattern仅对type="text"、"search"、"tel"、"url"、"email"、"password"有效，type="number"等类型直接忽略 - 正则中不能写
^或$，浏览器会自动加上，冗余写法在旧版 Safari 可能导致整条规则被跳过 - 推荐用
[0-9]替代\d，因部分 Safari/IE 不识别\d
用 input 和 blur 事件做实时反馈
要实现“边输边验”，必须用 JavaScript 监听 input（内容变化）和 blur（失焦）事件，并手动调用正则测试逻辑。这不是增强，而是补足 pattern 的天然缺失。
示例：校验用户名以字母开头、4–16 位、仅含字母数字下划线
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
const usernameInput = document.querySelector('input[name="username"]');
const regex = /^[a-zA-Z][a-zA-Z0-9_]{3,15}$/;
usernameInput.addEventListener('input', () => {
const isValid = regex.test(usernameInput.value);
if (isValid) {
usernameInput.setCustomValidity('');
} else {
usernameInput.setCustomValidity('账号名必须以字母开头，4–16位，只能含字母、数字、下划线');
}
});
// blur 补充一次校验，避免粘贴后未触发 input
usernameInput.addEventListener('blur', () => {
regex.test(usernameInput.value) || usernameInput.reportValidity();
});
-
setCustomValidity('')是清除错误的关键，空字符串表示“校验通过”，非空字符串才会阻断提交 - 不要只依赖
input事件：用户可能粘贴内容后直接点提交，blur能兜底 -
reportValidity()主动触发浏览器默认错误提示，比单纯设setCustomValidity更可靠
跨字段或异步校验必须绕开 pattern
pattern 天然不支持字段间联动或网络请求，比如“密码与确认密码一致”“用户名是否已被注册”。这类逻辑一旦硬塞进 pattern，要么失效，要么写出不可维护的嵌套正则。
真实场景中，你得自己管理状态：
- 监听两个
password字段的input，比对值并调用setCustomValidity设置错误文案 - 用户名查重需发 fetch 请求，成功后再清空
setCustomValidity，失败则设错误文案 - 禁用提交按钮直到所有字段
checkValidity()返回true - 注意：异步返回后，用户可能已切换焦点，需用
requestAnimationFrame或setTimeout延迟更新 UI
兼容性与 fallback 必须手动处理
IE 完全不支持 pattern，Safari 14 以下不支持环视（如 (?=.*\d)），移动端软键盘行为也不受控。指望原生机制覆盖所有环境，等于放弃底线。
最小兼容方案：
- 所有校验逻辑统一走 JS，把
pattern当作可选的“辅助提示”，而非主干 - 用
inputmode="text"或inputmode="numeric"控制软键盘类型，比依赖type="number"更可控 - 后端必须重复校验，前端正则只是体验层，不是安全层
- 复杂正则（如中文+字母+数字）慎用
\u4e00-\u9fa5，Safari 对 Unicode 范围支持不稳定，建议服务端兜底
最常被忽略的一点：setCustomValidity 设的错误文案，在用户修改后必须显式清空，否则即使输对了也持续报错——这个状态不会自动重置。
