HTML5 模式验证被忽略答案

【问题标题】：HTML5 pattern validation being ignoredHTML5 模式验证被忽略
【发布时间】：2016-01-18 20:06:40
【问题描述】：

我有一个电子邮件输入字段，我的正则表达式为 ^[^@]+@[^@.]+.[^@]+$，但运行时它不需要 .com。

转到https://jsfiddle.net/uscktx9d/ 并输入 www@www 并点击提交。这应该验证失败，但不是。正如您在这里看到的https://regex101.com/r/pB6iF4/1，正则表达式应该需要.com。

为什么我的 HTML5 不需要这个？

【问题讨论】：

您在问题和链接的小提琴中缺少` 来转义文字.。将` 添加到小提琴中，使整个正则表达式为^[^@]+@[^@.]+\.[^@]+$ 拒绝www@www 并接受www@www.com。
你可以避免 HTML5 模式中隐含的第一个 ^ 和最后一个 $ ： [^@]+@[^@]+\.[^@]+ 就足够了

标签： regex html

【解决方案1】：

如果您要对电子邮件使用 HTML5 输入验证，请使用 type email。这将对电子邮件进行原生 HTML5 验证并具有额外的好处（例如在移动设备的虚拟键盘上显示 @ 符号）。

另外，请记住，任何前端验证都应在后端重新验证。

不过，要回答您的问题，您需要使用反斜杠转义 .。

【讨论】：

谢谢。不幸的是，type email 也不关心 .com。转义是我所缺少的。
<input type="email" pattern="\.[^@]+$"> 可能是一个不错的折衷方案，该模式只会检查 TLD，而 HTML5 会处理 @ 逻辑。

【解决方案2】：

在正则表达式中，应将文字点声明为转义的\. 符号。如果您想确保它们被视为文字，请参阅应该转义的 Special characters in regular expressions。

另外，HTML5 pattern attribute 值默认是锚定的，即整个模式被包裹在 ^(?: 和 )$ 中。

用于该属性的正则表达式语言与 JavaScript 中使用的相同，只是模式属性匹配整个值，而不仅仅是任何子集（有点好像它在开头暗示了 ^(?:模式和最后的)$）。

因此，您只需要使用

<input name="asdf" pattern="[^@]+@[^@.]+\.[^@]+" placeholder="email@example.com" title="email@example.com">

【讨论】：