我应该在html5输入正则表达式模式验证中使用^和$吗?

Mar*_*lio 12 regex validation html5 browser-bugs

我已经看到大多数没有^(circumflex)和$(货币或美元)字符的例子来标记匹配字符串的结尾.但是,我在html5规范中没有找到任何相关内容.它们隐含在模式中吗?html5规范声明它们是隐含的.

编译后的模式正则表达式在与字符串匹配时,必须将其开始锚定到字符串的开头,并将其结束锚定到字符串的结尾.这意味着用于此属性的正则表达式语言与JavaScript中使用的正则表达式语言相同,只是模式属性与整个值匹配,而不仅仅是任何子集(有点像它隐含了^(?:at start)模式和a)最后的$).

在type ="text"输入中,模式使用任一格式都可以正常工作,但是在type ="tel"输入中,我必须删除正则表达式的字符才能按预期工作.我已经在Opera和Firefox中进行了测试.

这是一个浏览器错误吗?我应该在bugzilla等中提交错误吗?


编辑:似乎我偶然发现了一个奇怪的错误,因为我无法创建一个简化的测试用例.页面中的简单输入不会显示上述行为.但问题仍然存在.我应该,还是不应该使用darn ^和$ anchors?

Mar*_*ery 7

HTML标准的上部分pattern属性仍然指出,它总是在固定的开始和结束,如问题已经引用:

编译后的模式正则表达式在与字符串匹配时,必须将其开头锚定到字符串的开头,并将其结尾锚定到字符串的结尾。

我们可以使用一个简单的测试片段来确认这种行为:

<form>
  <input required pattern="abc">
  <button>Submit</button>
</form>
Run Code Online (Sandbox Code Playgroud)

你会注意到上面的形式拒绝了foo abcand 的值abc foo;只abc接受准确输入字符串。这表明它pattern="abc"等效于pattern="^abc$"并且您不需要显式指定^$

据我所知,这里的竞争答案声称浏览器用于实现不同的行为,违反了规范,这是完全错误的。您可以从https://ftp.mozilla.org/pub/firefox/releases/15.0/win32/en-GB/下载 Firefox 15并自己测试上面的代码片段,您会发现行为只是就像在现代浏览器中一样。或者,因为您可能不会被打扰,您可以查看我为您这样做的屏幕截图:

Firefox 15 中此答案的屏幕截图显示了上面拒绝“abc foo”输入的表单


Eug*_*eck -2

当然你知道电话号码有不同的形式,

例如

  • 在奥地利维也纳时,拨打“4000”即可将您转接到市政厅。
  • 在奥地利因斯布鲁克时,您需要拨打“014000”才能拨打维也纳市政厅
  • 在美国纽约时,您需要拨打 +4314000 才能拨打相同的号码。

这是有历史原因的,旧的机械系统将通过每个数字将呼叫从一个设备连接到下一个设备的工作委托给您(这也是分机号位于号码末尾而不是开头的原因) DNS,您可以在前面扩展域名,但不能在末尾扩展)

现在,一个具有两个锚点的正则表达式^$仅匹配电话号码(如果以完全相同的形式给出)。$只要没有给出不同的分机号,仅使用锚点就可以可靠地匹配相同的电话号码。无锚点,即丢弃^,并且$将独立于位置代码和扩展名进行匹配,但会引入不可靠性:

使用“4000”作为维也纳市政厅的模式将匹配“4000”、“014000”和“+4314000”,但它也会匹配“+44140001”(德国银行)。

  • -1,因为这个答案的大部分内容都没有解决所提出的问题,而最后两段中最终“确实”解决了这个问题的部分是错误的。`&lt;input type="tel" pattern="4000"&gt;` 将拒绝输入 `014000`,与此答案相反。 (2认同)