input使用 pattern 验证网址报错 正则错误

Question

在使用如下的正则时候，浏览器会报错。

<input pattern="^https?:\/\/([a-zA-Z0-9\-]+\.)+([a-zA-Z]{2,5})([\/\?#][a-zA-Z0-9`~!@#%&_=;\$\^\*\(\)\-\+\{\}\[\]\:\,\.\?\/\|]*)?$"
 onblur="inspectValidity(this)" name="url" type="text" required />

``
报错信息如下：

> Pattern attribute value ^https?:\/\/([a-zA-Z0-9\-]+\.)+([a-zA-Z]{2,5})([\/\?#][a-zA-Z0-9`~!@#%&_=;\$\^\*\(\)\-\+\{\}\[\]\:\,\.\?\/\|]*)?$ is not a valid regular expression: Uncaught SyntaxError: Invalid regular expression: /^https?:\/\/([a-zA-Z0-9\-]+\.)+([a-zA-Z]{2,5})([\/\?#][a-zA-Z0-9`~!@#%&_=;\$\^\*\(\)\-\+\{\}\[\]\:\,\.\?\/\|]*)?$/: Invalid escape


换一个简单的正则就没问题，校验的结果也是正确的

<input type="text" pattern="[1-9]d{5}(?!d)" onblur="inspectValidity(this)" name="code" required />

报错的正则单独用工具去测试 又没什么问题，请问下这是怎么回事？

Answer 1

转义出错了吧，:, 不需要转义吧