能，但仅限表单提交时触发原生提示；它不监听input或blur事件，无法实时校验，错误提示依赖title属性，且仅对text/tel/email等文本类型生效。
input 的 pattern 属性能触发原生提示吗？
能，但仅限表单提交时（submit 事件），且只在浏览器内置验证失败时弹出气泡提示。它不会在用户输入过程中实时校验，也不会响应 input 或 blur 事件。很多开发者误以为加了 pattern 就能“实时提醒”，结果发现输错内容毫无反应——这是最常见的预期偏差。
如何让输入框在失焦时显示自定义正则校验提示？
必须手动监听 blur（或 input），用 test() 验证值，并通过 DOM 操作控制提示文案或样式。关键点：
-
pattern属性的值（如^[a-z]{3,}$）可直接提取为 RegExp 对象：new RegExp(input.getAttribute('pattern')) - 注意
pattern不带/g标志，且默认锚定（开头隐含^，结尾隐含$），直接test()即可 - 避免重复绑定：同一个
input多次执行绑定逻辑会导致多次触发提示 - 提示文案别硬写死，优先读取
title或自定义data-error属性，方便复用
const input = document.querySelector('input[pattern]');
input.addEventListener('blur', () => {
const regex = new RegExp(input.getAttribute('pattern'));
if (!regex.test(input.value)) {
const msg = input.dataset.error || '格式不正确';
// 插入或更新 nearby 的 <span class="error"> 元素
}
});
为什么用 setCustomValidity() 反而更麻烦？
它确实能接管原生验证消息，但副作用明显：
- 一旦调用
setCustomValidity('xxx')，该字段就进入“无效”状态，即使后续输入合法，也仍需再调用setCustomValidity('')才能恢复 - 它只影响
checkValidity()和提交拦截，对 UI 提示无直接帮助，仍要自己控制元素显隐 - 和
pattern混用时行为不一致：比如pattern本身已不匹配，再调用setCustomValidity()会覆盖原生提示，但逻辑容易混乱
移动端键盘弹出后提示被遮挡怎么办？
这不是正则问题，而是 DOM 渲染时机与滚动位置冲突。常见于 iOS Safari 和部分安卓 WebView：
立即学习“前端免费学习笔记（深入）”；
- 提示元素插入后，立即调用
input.scrollIntoView({ block: 'nearest' })往往无效，因为键盘尚未完全展开 - 稳妥做法是加一个
setTimeout延迟 300ms 再滚动，或监听focus后的resize事件（键盘展开会触发窗口高度变化） - 更轻量的解法：把提示元素放在
input的父容器内，用 CSSposition: absolute; bottom: -24px;定位，避免脱离文档流导致滚动错乱
正则校验本身很简单，真正卡住人的永远是提示的时机、位置和状态同步——尤其是多个校验规则叠加、配合清空按钮或自动格式化时，value、input.value、input.rawValue（如果用了 masked input）之间很容易不同步。
