HTML5电子邮件验证

在 HTML5中，你可以这样做:

<form>
<input type="email" placeholder="Enter your email">
<input type="submit" value="Submit">
</form>

当用户按提交键时，它会自动显示如下错误消息:

仅仅使用 HTML5属性“模式”来正确验证电子邮件是非常困难的。如果你不使用“模式”，某人@将被处理。这是无效的电子邮件。

使用 pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}"将需要的格式是 someone@email.com，但是，如果发件人有一个像 someone@email.net.au(或类似的)格式将不会得到验证，以解决这个问题，你可以把 pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}"这将验证“ .com。或者。或类似的。

但是使用这个，它将不允许 someone@email.com 进行验证。因此，至于简单地使用 HTML5来验证电子邮件地址仍然不完全适合我们。为了完成这个任务，你可以使用下面的代码:

<form>
<input id="email" type="text" name="email" pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}" required placeholder="Enter you Email">
<br>
<input type="submit" value="Submit The Form">
</form>

或:

<form>
<input id="email" type="text" name="email" pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}" required placeholder="Enter you Email">
<br>
<input type="submit" value="Submit The Form">
</form>

但是，我不知道如何使用 HTML5模式属性验证两个或所有版本的电子邮件地址。

Www.w3.org站点的 input type=email页面指出，电子邮件地址是任何符合以下正则表达式的字符串:

/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/

使用 required属性和 pattern属性要求该值与正则表达式模式匹配。

<input
type="text"
pattern="/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/"
required
>

我知道您不是在寻求 Javascript 解决方案，但是有一些事情，例如定制的验证消息，根据我的经验，只能使用 JS 来完成。

此外，通过使用 JS，您可以动态地将验证添加到站点中所有类型为 email 的输入字段，而不必修改每个单独的输入字段。

var validations ={
email: [/^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/, 'Please enter a valid email address']
};
$(document).ready(function(){
// Check all the input fields of type email. This function will handle all the email addresses validations
$("input[type=email]").change( function(){
// Set the regular expression to validate the email
validation = new RegExp(validations['email'][0]);
// validate the email value against the regular expression
if (!validation.test(this.value)){
// If the validation fails then we show the custom error message
this.setCustomValidity(validations['email'][1]);
return false;
} else {
// This is really important. If the validation is successful you need to reset the custom error message
this.setCustomValidity('');
}
});
})

下面是我用于所有表单电子邮件输入的示例。这个例子是 ASP.NET，但适用于任何:

<asp:TextBox runat="server" class="form-control" placeholder="Contact's email"
name="contact_email" ID="contact_email" title="Contact's email (format: xxx@xxx.xxx)"
type="email" TextMode="Email" validate="required:true"
pattern="[a-zA-Z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*" >
</asp:TextBox>

HTML5仍然在不需要的时候使用模式进行验证。还没有发现一个是假阳性的。

这将呈现如下 HTML:

<input class="form-control" placeholder="Contact's email"
name="contact_email" id="contact_email" type="email"
title="Contact's email (format: xxx@xxx.xxx)"
pattern="[a-zA-Z0-9!#$%&amp;'*+\/=?^_`{|}~.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*">

在 somemail@email.com/somemail@email.com.vn中使用 [a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}

document.getElementById("email").validity.valid

当字段为空或有效时似乎为真。这里还有一些其他有趣的标志:

在 Chrome 中测试。

唯一100% 正确的方法是在输入的电子邮件地址的某个地方检查@- sign，然后将验证消息发送到给定的电子邮件地址。如果最终用户可以遵循 电子邮件中的验证说明，输入的电子邮件地址是正确的。

此外，一些电子邮件地址，可能是句法或政治上无效，做工作。例如，尽管顶级域名不应该有 MX 记录，但 postmaster@ai在技术上是可行的。另请参阅 关于 WHATWG 邮件列表中的电子邮件验证的讨论(HTML5最初就是在这里设计的)。

使用 HTML5，只需输入如下电子邮件:

<input type="email"/>

When the user hovers over the input box, they will a tooltip instructing them to enter a valid email. However, Bootstrap forms have a much better Tooltip message to tell the user to enter an email address and it pops up the moment the value entered does not match a valid email.

您也可以遵循这种模式

<form action="/action_page.php">
E-mail: <input type="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
<input type="submit">
</form>

档号: 在 W3学校

对于聚会来说有点晚了，但是这个正则表达式帮助我在客户端验证电子邮件类型输入。尽管如此，我们还是应该在服务器端进行验证。

<input type="email" pattern="^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$">

你可以找到更多的正则表达式的所有类型的 给你。

根据 MDN ，这个 RegExp 可以验证电子邮件，因为符合规范的电子邮件应该与之匹配。

/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}
[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/

如果你只是学习 HTML，你想要一个简单的解决方案 这段代码将为您完成这项工作

 <form>
<input type="email" placeholder="Enter your email">
<input type="submit" value="Submit" required>
</form>