pattern属性仅在表单提交或checkValidity()调用时生效，实时校验需监听input事件并配合setCustomValidity()控制状态，辅以防抖和paste/focusout兜底。
input 元素的 pattern 属性只做提交前校验，不实时
很多人以为 pattern 属性能触发实时反馈，其实它只在表单调用 checkValidity() 或提交时生效，input 事件中完全不触发。浏览器也不会自动添加 invalid 状态或显示提示——除非你手动干预。
要真正“实时”，必须监听 input（不是 change）事件，并主动调用 setCustomValidity() 控制验证状态。
-
input事件捕获每一次输入（包括粘贴、删除、IME 输入），change只在失焦后触发，不适合实时校验 - 每次触发都要重新执行
RegExp.test()，避免缓存过期的匹配结果 - 若正则含
^和$，注意它匹配的是整个字符串；若只校验开头或中间部分，需调整锚点或使用search()/exec()
用 setCustomValidity() 控制浏览器原生反馈
这是最轻量、兼容性最好的方式：不引入第三方库，复用浏览器已有的红色边框、:invalid 伪类和弹出提示。
关键逻辑是——匹配成功时清空自定义错误，否则设为非空字符串：
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
const input = document.querySelector('input[data-pattern]');
const regex = new RegExp(input.dataset.pattern);
input.addEventListener('input', () => {
if (regex.test(input.value)) {
input.setCustomValidity(''); // ✅ 清空错误，标记为有效
} else {
input.setCustomValidity('格式不正确'); // ❌ 触发 invalid 状态
}
});
-
setCustomValidity('')是唯一能让元素恢复“有效”状态的方法；传入空字符串以外的任何值都会让validity.valid变为false - 不要在
invalid事件里调用setCustomValidity()——它只用于设置，不是响应事件的钩子 - 如果需要支持中文手机号、邮箱等复杂规则，建议把正则提取为常量，避免在 HTML 中写死
data-pattern（易 XSS 且难维护）
防抖不是可选，而是必须加的性能保护
用户快速连打或长按输入时，input 事件会高频触发。正则测试本身开销不大，但若后续叠加 API 调用、DOM 更新或复杂逻辑，卡顿立刻出现。
一个简单可靠的防抖实现（无需 Lodash）：
let timer;
input.addEventListener('input', () => {
clearTimeout(timer);
timer = setTimeout(() => {
const isValid = regex.test(input.value);
input.setCustomValidity(isValid ? '' : '请输入正确的格式');
}, 200); // 延迟 200ms，兼顾响应与吞吐
});
- 200ms 是经验值：短于 100ms 用户感知不到延迟，长于 300ms 会觉得反馈滞后
- 防抖必须在事件回调内重置定时器，不能只声明一次
timer就完事 - 如果校验逻辑涉及异步（如查重、远程验证），要用
AbortController取消上一轮请求，否则容易状态错乱
移动端粘贴和自动填充容易绕过实时校验
Android 键盘粘贴、iOS 的密码自动填充、甚至 Safari 的“强密码建议”都可能跳过 input 事件——它们有时只触发 paste 或 change，甚至直接修改 value 后不抛事件。
稳妥做法是补充监听：
- 监听
paste事件，在setTimeout微任务中执行校验（因为粘贴后value还没更新） - 对关键字段（如手机号、邮箱），在
focusout时再兜底校验一次 - 避免依赖
oninput="validate(this)"写在 HTML 里——无法处理粘贴等边缘事件，也不利于防抖
真实场景里，正则只是第一道过滤；用户是否“真的输对了”，往往得靠 onBlur 后的语义检查（比如邮箱域名是否存在、手机号区号是否合法）来补全。别指望一行 /^\d{11}$/ 就能拦住所有问题。
