能，但仅限表单提交时触发，且不支持实时反馈；用户输入过程中不会高亮或拦截，仅在点击type="submit"按钮或按回车提交时，浏览器才用pattern正则校验值并弹出默认提示。
input 的 pattern 属性能直接触发浏览器原生校验吗？
能，但仅限表单提交时触发，且不支持实时反馈。用户输入过程中不会高亮或拦截，只有点击 <button type="submit"> 或按回车提交时，浏览器才用 pattern 正则校验值，并弹出默认提示（如“请匹配指定格式”）。这个行为不可定制样式，也无法捕获校验失败的细节。
常见误区是以为加了 pattern 就能“自动实时校验”，结果发现输错内容毫无反应——这是正常表现，不是 bug。
-
pattern值必须是 JavaScript 正则字面量的主体（不含/开头结尾），例如邮箱应写pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"，而不是/.../ - 正则默认**不锚定首尾**，浏览器会自动加上
^和$，所以无需手动写 - 若需允许空值，得显式在正则中包含
?或|^$，否则空字符串也会校验失败
如何用 addEventListener("input") 实现实时校验？
这才是真正“自动”的做法：监听每次输入，调用 RegExp.test() 判断，再通过 setCustomValidity() 控制校验状态。关键在于不能只改样式，还要影响表单的 checkValidity() 结果，否则提交时仍可能绕过。
示例：手机号实时校验（11位数字）
立即学习“前端免费学习笔记（深入）”；
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
<input type="text" id="phone">
<script>
const phoneInput = document.getElementById("phone");
const phoneRegex = /^1[3-9]\d{9}$/;
<p>phoneInput.addEventListener("input", () => {
const value = phoneInput.value.trim();
if (value === "") {
phoneInput.setCustomValidity(""); // 清空错误，允许为空
} else if (!phoneRegex.test(value)) {
phoneInput.setCustomValidity("请输入正确的11位手机号");
} else {
phoneInput.setCustomValidity(""); // 校验通过
}
});
</script>- 必须调用
setCustomValidity("")显式清空错误，否则一旦设过非空字符串，后续即使输入正确也不会自动恢复为 valid 状态 - 不要在
input事件里直接修改value（比如过滤非数字），会导致光标跳动；如需过滤，改用beforeinput事件或受控组件逻辑 - 正则中的
^和$必须手动写，因为test()不自动锚定
为什么 invalid 伪类没生效？
因为 :invalid 只响应浏览器原生校验状态（如 required、type="email" 或 pattern 提交校验），而 setCustomValidity() 设置的错误**不会自动触发 :invalid** —— 它只影响 JS 的 checkValidity() 和提交行为。
要让样式同步，得手动切换 class：
phoneInput.addEventListener("input", () => {
// ... 上面的 test 和 setCustomValidity 逻辑
phoneInput.classList.toggle("invalid", phoneInput.validity.customError);
});-
validity.customError是布尔值，准确反映当前是否处于setCustomValidity("xxx")状态 - 不要依赖
validity.valid来判断“是否出错”，因为它在空值、类型错误等场景下也可能是 false，语义太宽 - 如果同时用了
required和自定义校验，validity.valid为 false 时你无法区分是必填未填，还是正则不匹配
移动端软键盘弹出后校验失效怎么办？
某些 Android 浏览器（尤其旧版 WebView）在软键盘收起瞬间会触发一次空值 input 事件，导致刚输对的内容被误判为无效。这不是正则问题，而是输入法异步更新 value 的竞态。
- 简单缓解：加防抖，延迟 100ms 再执行校验逻辑（
setTimeout+clearTimeout） - 更稳方案：监听
blur事件做最终校验，input事件只做轻量提示（如图标变色），不阻断 - 避免在
input中调用alert()或confirm()，会打断软键盘流程，引发更多兼容问题
正则本身没玄学，但浏览器对输入事件的处理节奏、软键盘与 DOM 更新的时机差，才是移动端校验最常翻车的地方。
