HTML pattern属性中手机号正则失效：regex101正常但浏览器不生效

核心原因 #

HTML5的pattern属性有一个容易被忽略的特性：它会自动为你提供的正则表达式添加^和$锚点，强制正则匹配整个输入字符串。

你写的正则里已经显式在两个分支前都加了^，末尾加了$，导致浏览器最终解析的正则变成了：

^(?:^\d{10}$|^(\(\d{3}\)\s*)?\d{3}[\s-]?\d{4}$)$

这种嵌套锚点的正则逻辑完全混乱，浏览器无法正确执行验证，因此会默认允许任意输入内容通过。

修复方法 #

去掉正则中所有显式的^和$锚点，修改后的pattern值为：

\d{10}|(\(\d{3}\)\s*)?\d{3}[\s-]?\d{4}

对应的HTML代码：

<div class="formRow">
    <label for="phone">Phone number</label>
    <input name="custPhone" id="phone" type="tel" placeholder="(nnn) nnn-nnnn" 
     pattern="\d{10}|(\(\d{3}\)\s*)?\d{3}[\s-]?\d{4}" > 
</div>

浏览器会自动为这个正则添加首尾锚点，最终的匹配逻辑和你在测试工具中验证的一致，能够正确校验手机号格式。

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