HTML5 电子邮件输入模式属性

Question

我正在尝试制作一个包含一个电子邮件输入、一个复选框输入和一个提交输入的 html5 表单。我正在尝试将 pattern 属性用于电子邮件输入，但我不知道在该属性中放置什么。我知道我应该使用必须匹配 JavaScript 模式生成的正则表达式，但我不知道该怎么做。

我试图让这个属性做的是检查以确保电子邮件包含一个 @ 和至少一个或多个点，如果可能的话检查 @ 之后的地址是否是真实地址。如果我不能通过此属性执行此操作，那么我将考虑使用 JavaScript，但为了检查一个 @ 和一个或多个点，我确实想使用 pattern 属性。

pattern 属性需要检查：

1. 只有一个 @
2. 一个或多个点
3. 如果可能的话，检查 @ 之后的地址是否是有效地址

另一种方法是使用 JavaScript，但对于所有其他情况，我不想使用 JavaScript。

原文由 Colton 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是一个双重问题（与万维网世界中的许多问题一样）。

您需要评估浏览器是否支持 html5（我使用 Modernizr 来完成）。在这种情况下，如果你有一个普通的表单，浏览器会为你完成这项工作，但如果你需要 ajax/json（很多日常情况），你无论如何都需要执行手动验证。

.. 所以，我的建议是在提交之前随时使用正则表达式进行评估。我使用的表达式如下：

 var email = /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/;

这个取自 http://www.regular-expressions.info/ 。这是一个难以理解和掌握的世界，因此我建议您仔细阅读此页面。

原文由 Alwin Kesler 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我在使用 HTML5s 电子邮件输入时遇到了这个确切的问题，使用上面的 Alwin Keslers 回答我将正则表达式添加到 HTML5 电子邮件输入中，因此用户必须在末尾有 .something。

 <input type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" />

原文由 Stephen 发布，翻译遵循 CC BY-SA 3.0 许可协议