HTML5 pattern中正则`\d+(-\d+)?[A-Z]?`无法匹配“180-186”的原因

• 现代浏览器实现pattern校验时，使用的就是JavaScript内置的RegExp引擎，不存在独立的正则实现，和正则测试平台的JS运行环境没有引擎层面的差异，校验结果和预期不符的核心原因是匹配规则的强制封装逻辑：
  浏览器会自动对pattern属性的正则做全字符串匹配封装，等价于在你写的规则外层自动补全^(?:你的规则)$的边界限定，要求输入值从头到尾没有任何多余字符、完全匹配规则才算通过，而非正则平台常见的子串匹配逻辑——平台只要在输入串中找到能被规则匹配的子串就会提示成功，这是你之前误以为规则没问题的核心来源。
• 你的现有静态规则\d+(-\d+)?[A-Z]?本身在全匹配模式下是可以正常匹配180-186的，实际校验失败大概率是两个常见踩坑点导致：
  1. 动态渲染时的反斜杠转义丢失：如果你的表单是通过jQuery/JS代码动态给input设置pattern属性，JS字符串会自动吃掉单个反斜杠：比如你写$(elem).attr('pattern', '\d+(-\d+)?[A-Z]?')，JS解析后实际生效的正则会把\d解析为普通字符d，最终规则变成匹配字母d的重复序列，自然无法匹配数字组成的180-186。静态HTML中直接写的pattern属性不存在这个问题，因为HTML属性解析不会处理反斜杠转义。
  2. 不可见字符混入：如果输入的180-186是从其他文档复制粘贴的，很可能携带了不可见的零宽字符、不间断空格、首尾换行符，这些字符不会在输入框中显示，但会被正则识别为非法内容，导致匹配失败。

按照门牌号采集的实际规则（支持纯数字、单字母后缀、数字范围格式；禁止空格、多连字符、中间位置字母、多字母后缀），可以把规则调整为：
pattern="\d{1,6}(-\d{1,6})?[A-Za-z]?"

• 规则适配说明：
  • 限定数字部分为1-6位，避免无意义的超长数字输入
  • 可选的范围部分仅允许单个连字符分隔两段数字，从根源上拦截多连字符的非法输入
  • 后缀的单个字母支持大小写，覆盖用户实际输入时不会刻意切换大写的场景
  • 依托浏览器的强制全匹配逻辑，该规则会自动拦截所有带空格、中间夹字母、多字母后缀的非法输入，完全匹配业务要求。

内容的提问来源于stack exchange，提问作者Kenny83