Bootstrap表单手机号验证正则表达式报错的原因及修复方法

问题原因 #

报错的核心是正则字符类里存在无效字符，问题出在你写的[-\. ]部分：

• HTML表单的pattern属性基于JavaScript正则引擎，在字符类[]里，.本身就是普通字符，不需要加反斜杠转义；你写的\.会被解析成「反斜杠+点」，而反斜杠在字符类里属于无效字符（除非用来转义连字符这类特殊场景）；
• 部分现代浏览器会默认启用正则的v标志（Unicode严格模式），这会让这类无效转义直接触发报错。

至于regexr、pythex能正常运行：

• regexr可能在非严格模式下自动忽略了这个无效转义；
• Python正则的规则允许字符类里用\.表示点，所以不会报错。

修复后的正则 #

把字符类里的\.改成.即可，同时可以把连字符放在字符类开头（避免歧义，可选），最终正则：

^\+?([0-9]{1,4})?[-. ]?(\d{3})[-. ]?([0-9]{7})$

如果要统一风格，把[0-9]换成\d也可以：

^\+?(\d{1,4})?[-. ]?(\d{3})[-. ]?(\d{7})$

验证说明 #

修改后的正则可以正常在Bootstrap表单的pattern属性中使用，同时依然支持原有的手机号格式验证（带可选国际区号、中间可加-/./空格分隔符），也能在regexr、pythex等平台正常工作。

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