HTML pattern 错误提示需配合 title 属性才显示自定义文本，否则仅提交时触发默认英文提示；实时校验须用 JS 监听事件+RegExp.test()+setCustomValidity()+reportValidity()，注意锚点和移动端兼容性。
HTML pattern 属性触发的错误提示不显示？
浏览器原生校验只在表单提交时触发，且 pattern 错误提示依赖 title 属性——没设 title，就看不到任何文字提示。不是 bug，是规范行为。
-
pattern必须配合title才能显示自定义提示，例如：<input pattern="[0-9]{3}" title="请输入3位数字"> - 仅设置
pattern而不设title，Chrome/Firefox 会显示默认英文提示（如 “Please match the requested format”），无法本地化 - 输入过程中不会实时提示；只有调用
checkValidity()或提交表单时才激活校验
用 JavaScript 手动触发并控制正则校验提示
想实时反馈、自定义样式或支持中文提示，必须绕过原生限制，用 JS 主动校验 + 操作 DOM。
- 监听
input或blur事件，用RegExp.test()判断值是否匹配 - 匹配失败时，用
setCustomValidity("错误信息")设置自定义错误（这会影响checkValidity()返回值） - 调用
reportValidity()强制弹出气泡提示（注意：该方法只对<form>内元素有效） - 避免重复调用
setCustomValidity("")清空错误后立刻reportValidity()，否则可能触发空提示
const input = document.querySelector('input[data-pattern]');
input.addEventListener('blur', () => {
const re = new RegExp(input.dataset.pattern);
if (!re.test(input.value)) {
input.setCustomValidity('手机号格式不正确');
} else {
input.setCustomValidity('');
}
});
正则写法影响校验结果：锚点必须显式写出
pattern 属性内部自动添加了 ^ 和 $，但手动用 JS 校验时不会——漏写锚点会导致部分匹配误判为成功。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- HTML 中：
pattern="1[3-9]d{9}"等价于^1[3-9]d{9}$ - JS 中：
/1[3-9]d{9}/.test("13812345678abc")返回true（因为子串匹配） - 正确写法：
/^1[3-9]d{9}$/.test(value)或new RegExp("^" + pattern + "$").test(value) - 如果正则含特殊字符（如
），HTML 中要双写：pattern="\d{6}"→ JS 中用/^d{6}$/
移动端 iOS Safari 的 reportValidity() 提示不可靠
iOS 15+ 支持该方法，但气泡位置常偏移、文字截断，且无法关闭。生产环境建议降级处理。
立即学习“前端免费学习笔记（深入）”；
- 优先改用 DOM 插入提示元素（如
<span class="error">格式错误</span>），可控性高 - 检测
input.reportValidity是否存在，不存在则跳过气泡，只做样式标记（如加class="invalid"） - 不要依赖
invalid事件的默认行为——它不保证提示一定出现，尤其在非提交场景
pattern 当成“开箱即用”的解决方案，它只是个基础钩子。 
