HTML5电子邮件输入模式属性

2018-07-03 08:20:51

我试图制作一个包含一个电子邮件输入，一个复选框输入和一个提交输入的html5表单。我正在尝试为电子邮件输入使用模式属性，但我不知道要在该属性中放置什么。我知道我应该使用一个必须与JavaScript模式生成相匹配的正则表达式，但我不知道如何执行此操作。

我试图让这个属性做的是检查以确保电子邮件包含一个@和至少一个或多个点，并且如果可能的话检查@之后的地址是否是真实地址。如果我不能通过这个属性来做到这一点，那么我会考虑使用JavaScript，但为了检查一个@和一个或多个点，我确实想要使用模式属性。

模式属性需要检查：

只有一个 @

一个或多个点

并且如果可能的话，检查@之后的地址是否是有效地址

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

这是一个双重问题（如www世界中的许多问题）。

您需要评估浏览器是否支持html5（我使用Modernizr来完成）。在这种情况下，如果你有一个正常的表单，浏览器将为你完成这项工作，但是如果你需要ajax / json（正如许多日常用例一样），你仍然需要手动验证。

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

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

这个来自http://www.regular-expressions.info/。这是一个难以理解和掌握的世界，所以我建议你仔细阅读本页。

我对HTML5s电子邮件输入有这个确切的问题，使用Alwin Keslers上面的回答，我将正则表达式添加到HTML5电子邮件输入中，因此用户必须在最后有一些东西。

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

在HTML5中，您可以使用新的“电子邮件”类型：http://www.w3.org/TR/html-markup/input.email.html

例如：

<input type="email" id="email" />

如果浏览器实现HTML5，它将确保用户在该字段中输入了有效的电子邮件地址。请注意，如果浏览器未实现HTML5，它将被视为“文本”类型，即：

<input type="text" id="email" />

链接地址: http://www.djcxy.com/p/92923.html