![](/img/trans.png)
[英]Regex validation working with JavaScript but not with HTML5 input validation pattern
[英]Should I use ^ and $ in html5 input regex pattern validation?
我见过大多数没有^(circumflex)和$(货币或美元)字符的例子来标记匹配字符串的结尾。
但是,我在html5规范中没有找到任何相关内容。
它们隐含在模式中吗?
html5规范声明它们是隐含的。
编译后的模式正则表达式在与字符串匹配时,必须将其开始锚定到字符串的开头,并将其结束锚定到字符串的结尾。 这意味着用于此属性的正则表达式语言与JavaScript中使用的正则表达式语言相同,只是模式属性与整个值匹配,而不仅仅是任何子集(有点像它隐含了^(?:at start)模式和a)最后的$)。
在type =“text”输入中,模式使用任一格式都可以正常工作,但是在type =“tel”输入中,我必须删除正则表达式的字符才能按预期工作。 我已经在Opera和Firefox中进行了测试。
这是一个浏览器错误吗? 我应该在bugzilla等中提交错误吗?
编辑:似乎我偶然发现了一个奇怪的错误,因为我无法创建一个简化的测试用例。 页面中的简单输入不会显示上述行为。 但问题仍然存在。 我应该,还是不应该使用darn ^和$ anchors?
关于pattern
属性的HTML标准部分仍然声明它始终锚定在开头和结尾,正如问题中引用的那样:
编译后的模式正则表达式在与字符串匹配时,必须将其开始锚定到字符串的开头,并将其结束锚定到字符串的结尾。
我们可以使用简单的测试代码段来确认此行为:
<form> <input required pattern="abc"> <button>Submit</button> </form>
你会注意到上面的表格拒绝了foo abc
和abc foo
; 只接受键入abc
的字符串将被接受。 这表明pattern="abc"
等同于pattern="^abc$"
,并且您不需要明确指定^
和$
。
据我所知,这里的竞争答案声称用于实现不同行为的浏览器违反规范,完全是错误的。 你可以从https://ftp.mozilla.org/pub/firefox/releases/15.0/win32/en-GB/下载Firefox 15并自己测试上面的代码片段,你会看到行为只是就像在现代浏览器中一样。 或者,既然你可能不会被打扰,你可以查看我这样做的截图:
根据标准, 正则表达式锚定在开始和结束 。 然而, 在实践中 (经过测试的FF 15和Chrome 21)它仅在开始时锚定!
因此,如果您希望兼容标准和现实,则应该明确地使用$
锚定正则表达式。 是否使用^
也取决于你 - 没有必要。
当然你知道电话号码有不同的形式,
例如
这有历史原因,旧的机械系统委托将呼叫从一个设备连接到下一个设备的每个数字的工作(这也是为什么扩展在数字的末尾而不是在开始时的原因,而不是DNS,您可以在前面扩展您的域名,但不能在最后扩展您的域名)
现在一个带有锚点^
和$
的正则表达式只会匹配一个电话号码,如果它以完全相同的形式给出。 只有$
anchor,它将可靠地匹配相同的电话号码,只要没有给出不同的扩展名。 没有锚点,即丢弃^
和$
将匹配独立的位置代码和扩展名,但会引入不可靠性:
使用“4000”作为维也纳市政厅的模式将匹配“4000”,“014000”和“+4314000”,但它也将匹配“+44140001”,这是德国银行。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.