html中输入url的模式不匹配

Question

我有一个输入网址和模式设置为“^http://”作为最简单的模式。当我使用下面的值时，它在有效性对象中显示为 patternMismatch。模式或值有什么问题

<input value="http://www.example.com" pattern="^http://" type="url"/>, 

Answer 1

您需要转义反斜杠。此外，开始和结束锚定是隐式的：

<input value="http://www.example.com" pattern="http:\/\/.+" type="url"/>

.+ 结尾意味着必须至少有一个字符。基本上，这个 RegExp 实际上是：

/^http:\/\/.+$/u

u 标志和 ^ 和 $ 锚是隐含的：

• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
• Should I use ^ and $ in html5 input regex pattern validation?