pattern仅前端提示，不保证合规；须后端白名单校验+前端协同，正则不加/^$/、必配title、移动端支持弱，不可替代inputmode等体验优化。
HTML 正则测试和在线验证是两件完全不同的事，不能互相替代，也不该混着用。前者针对 pattern 属性或 JS 中的 RegExp 对象做字符串匹配逻辑验证；后者检查的是 HTML 文档结构、标签嵌套、属性语法是否符合 W3C 规范。选错工具，根本查不到你要的问题。
HTML 表单里的 pattern 怎么测才靠谱
浏览器对 pattern 的执行逻辑很具体：只在提交时触发、只作用于 <input> 元素、且正则默认带 ^ 和 $ 锚定（不需手动加）。常见错误是拿在线正则工具测出“能匹配”，但表单里始终不生效。
- 必须用
<input type="text" pattern="^[a-z]{3}$">这类完整写法，单独丢一个正则字符串进去没意义 - 测试时一定要点
<button type="submit"></button>，用form.submit()或回车提交会跳过pattern校验 -
pattern不校验空值——如果字段还带required，空值由它管；否则空字符串直接算“匹配成功” - 移动端键盘行为会影响输入流，比如
type="text"+pattern无法强制唤起数字键盘，别指望靠它控制输入法
W3C HTML 验证器报的 Bad value 是啥意思
这是典型属性值语法错误，和正则无关。比如你在 input 上写了 pattern="{1,3}"，验证器会报 Bad value {1,3} for attribute pattern on element input——因为 {1,3} 缺少前导表达式，不是合法正则字面量，浏览器解析时会直接忽略整个 pattern 属性。
- W3C 验证器只检查你写的字符串是否构成「合法的正则字面量」，不运行也不测试匹配效果
- 像
pattern="\d+"要写成pattern="\d+"（双反斜杠），HTML 解析阶段就会转义一次，传给 JS 时才是单反斜杠 - 如果验证器提示
Attribute pattern not allowed on element input at this point，说明这个input当前type不支持pattern（比如type="hidden"或type="submit"）
什么时候该用浏览器 DevTools 查，而不是在线工具
当页面已部署、用户反馈“明明填对了却报错”，或者你想确认实际运行时的校验状态，DevTools 比任何在线工具都直接。
- 在 Console 里执行
document.querySelector('input').checkValidity()，返回false就说明当前值被拦下了 - 看 Elements 面板里该
input是否多了:-webkit-validation-bubble-message类（Chrome）或validity对象里哪项为false - 打断点在
submit事件里，检查event.submitter是不是type="submit"按钮——如果不是，原生校验压根没跑 - 别信 Network 面板里有没有发请求：校验失败时，
submit事件会被取消，但如果你绑了preventDefault()又没手动处理，就只剩黑盒
真正容易被忽略的是：HTML 验证器不会告诉你 pattern 写得再对，如果父 <form></form> 被 JS 动态移除了 action 或加了 novalidate，整套机制就静默失效了。这种问题只能靠运行时调试，没法靠静态扫描发现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
