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

时间:2012-02-04 16:06:01

标签: regex html5 validation browser-bugs

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

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

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

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


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

3 个答案:

答案 0 :(得分:3)

the pattern attribute上的HTML标准部分仍然指出,它始终固定在开始和结束位置,如问题中已经引用的那样:

  

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

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

<form>
  <input required pattern="abc">
  <button>Submit</button>
</form>

您会注意到上面的表格拒绝foo abcabc foo的值;仅输入完全相同的字符串abc。这表明pattern="abc"等效于pattern="^abc$",并且您不需要显式指定^$

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

Screenshot of this answer in Firefox 15 showing the form above rejecting input of "abc foo"

答案 1 :(得分:2)

根据标准,the regex is anchored at the start and end。但是,在实践中(经过测试的FF 15和Chrome 21)它只停留在开始!

因此,如果您希望兼容标准和现实,则应该明确地使用$锚定正则表达式。是否使用^也取决于您 - 没有必要。

答案 2 :(得分:-1)

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

e.g。

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

这有历史原因,旧的机械系统委托将呼叫从一个设备连接到下一个设备的每个数字的工作(这也是扩展位于数字末尾而不是一开始的原因,在DNS中你可以在前面扩展你的域名,但不是最后的域名

现在,只有电话号码^$的正则表达式才会匹配电话号码,如果它以完全相同的形式给出。只有$锚点,它将可靠地匹配相同的电话号码,只要没有给出不同的扩展名。没有锚点,即丢弃^$将匹配独立的位置代码和扩展名,但会引入不可靠性:

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