16

我看到的大多数示例都没有 ^（抑扬符）和 $（货币或美元）字符来标记匹配字符串的开头和结尾。但是，我在 html5 规范中没有找到任何关于此的内容。它们是否隐含在模式中？html5 规范声明它们是隐式的。

编译后的模式正则表达式在与字符串匹配时，必须将其开头锚定到字符串的开头，并将其结尾锚定到字符串的结尾。这意味着用于该属性的正则表达式语言与 JavaScript 中使用的相同，除了模式属性与整个值匹配，而不仅仅是任何子集（有点好像它在开头暗示了一个 ^(?:模式和最后的 )$)。

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

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

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

4

3 回答 3

9

HTML 标准关于属性的部分仍然pattern声明它始终锚定在开头和结尾，正如问题中已经引用的那样：

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

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

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

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

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

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

于 2018-12-06T23:04:42.733 回答
1

根据标准，正则表达式锚定在 start 和 end。然而，在实践中（测试 FF 15 和 Chrome 21）它只在开始时锚定！

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

于 2012-09-25T14:17:08.093 回答
-2

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

例如

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

这是有历史原因的，旧的机械系统将呼叫从一个设备连接到下一个设备的工作委托给每个数字（这也是为什么分机位于数字末尾而不是开头的原因） DNS，您可以在前面扩展您的域名，但不能在最后）

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

使用“4000”作为维也纳市政厅的模式将匹配“4000”、“014000”和“+4314000”，但也将匹配“+44140001”，这是一家德国银行。

于 2012-02-04T16:24:01.543 回答