不能。pattern仅在表单提交或调用checkValidity()时触发校验，不实时响应输入，:valid/:invalid伪类不会自动更新，需监听input事件并手动调用checkValidity()才能实现状态切换。
input 的 pattern 属性能直接触发校验状态切换吗
不能。pattern 仅在表单提交时（或调用 checkValidity()）才触发原生校验，不会在用户输入过程中实时响应。也就是说，:valid/:invalid 伪类默认不会随输入动态更新，除非手动触发验证逻辑。
常见错误现象：input 输入非法内容后样式没变、submit 前一直显示绿色边框、控制台无报错但校验不生效。
- 必须配合
oninput或addEventListener('input', ...)主动调用checkValidity() -
pattern值必须是字符串字面量（不带/g标志），例如pattern="[a-z]{3,}"，而非pattern="/[a-z]{3,}/g" - 空值默认通过校验（除非加
required），所以邮箱字段若允许为空，需额外用 JS 判断是否非空再决定是否走正则校验
如何用 JS 实现输入时实时更新 :valid/:invalid 状态
核心是让浏览器“重算”元素的校验状态：调用 element.checkValidity() 后，浏览器会同步更新 :valid 和 :invalid 的匹配结果，CSS 就能立即响应。
使用场景：密码强度提示、用户名格式反馈、手机号区号校验等需要视觉即时反馈的交互。
立即学习“前端免费学习笔记（深入）”；
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 监听
input事件（不是change，后者只在失焦时触发） - 调用
inputEl.checkValidity()，它返回布尔值，同时触发伪类重计算 - 可选：用
inputEl.setCustomValidity('')清除自定义错误，避免干扰原生 pattern
<input type="text" id="username" pattern="[a-zA-Z0-9_]{3,16}" required>
<style>
#username:valid { border-color: #28a745; }
#username:invalid:not(:placeholder-shown) { border-color: #dc3545; }
</style>
<script>
const el = document.getElementById('username');
el.addEventListener('input', () => {
el.checkValidity(); // 关键：触发状态重计算
});
</script>
为什么 setCustomValidity('') 必须在每次 input 中调用
一旦调用过 setCustomValidity('xxx')，该元素就进入“自定义校验模式”，原生 pattern 和 required 将被忽略，直到显式设为空字符串。
容易踩的坑：只在验证失败时调用 setCustomValidity('格式错误')，却忘记在输入合法时清空——导致后续所有输入都维持 :invalid 状态，即使内容已符合 pattern。
- 每次
input事件中，先el.setCustomValidity('')，再根据业务逻辑决定是否设错误信息 - 不要依赖
el.validity.valid判断后再设，因为validity对象本身受setCustomValidity影响，存在循环依赖风险 - 若需兼容旧版 Safari（
input事件不触发:valid重绘），可追加el.reportValidity()，但它会弹原生提示框，慎用
正则校验与 CSS 状态联动的边界在哪里
CSS 只能响应浏览器内置的校验状态（:valid/:invalid），无法感知 JS 自定义的复杂规则（如“密码不能包含用户名”）。这类逻辑必须降级为 class 切换。
性能影响：频繁调用 checkValidity() 几乎无开销，但若正则本身很重（比如长文本 + 回溯型表达式），建议节流或改用 blur 触发。
- 纯格式校验（邮箱、手机号、密码长度）优先走
pattern+checkValidity() - 涉及上下文判断（如两次输入密码比对、用户名与昵称不能相同）必须用
classList.toggle('error', bool) - 移动端注意：iOS Safari 对
pattern支持有限，type="email"比pattern=".*@.*"更可靠
pattern 当成万能过滤器，却没意识到它不自动激活、不处理空值、且和 setCustomValidity 存在互斥关系。状态切换不是“写完 pattern 就完事”，而是要主动推一把。 
