HTML5电子邮件验证

Question

据说"使用HTML5,我们不再需要js或服务器端代码来检查用户的输入是否是有效的电子邮件或URL地址"

如何在用户输入后验证电子邮件？没有JS如果用户输入错误的电子邮件地址,如何显示消息.

<input type="email" pattern="[^ @]*@[^ @]*" placeholder="Enter your email">
<input type="submit" value="Submit">

Answer 1

在HTML5中你可以这样做:

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

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

Answer 2

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
>

Answer 3

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

Answer 4

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

当字段为空或有效时,似乎是真的.这也有一些其他有趣的标志:

在Chrome中测试过.

Answer 5

TL;DR：唯一 100% 正确的方法是简单地检查输入的电子邮件地址中的某个位置是否有 @ 符号，然后向给定的电子邮件地址发送验证消息。如果最终用户可以按照该电子邮件中的验证说明进行操作，则输入的电子邮件地址是正确的。

\n

长答案：

\n

大卫·吉尔伯特森（David Gilbertson）几年前曾写道：

\n

\n

我们需要问两个问题：

\n

\n
1. 用户是否明白他们应该在此字段中键入电子邮件\n地址？
\n
2. 用户是否正确键入了自己的电子邮件\n地址在此字段中
\n

\n

如果您有一个布局良好的表单，其标签\n显示 \xe2\x80\x9cemail\xe2\x80\x9d，并且用户在某处输入 \xe2\x80\x98@\xe2\x80\x99 符号，那么\nit\xe2\x80\x99 可以肯定地说他们明白他们应该\n输入电子邮件地址。简单的。

\n

接下来，我们想要进行一些验证，以确定他们是否正确\n输入了电子邮件地址。

\n

不可能。

\n

[...]

\n

任何错误输入肯定会导致电子邮件地址不正确，但也仅可能导致电子邮件地址无效。

\n

[...]

\n

尝试确定电子邮件地址是否为 \xe2\x80\x98valid\xe2\x80\x99 是没有意义的。用户输入错误且有效的电子邮件地址的可能性远高于输入无效电子邮件地址的可能性。

\n

\n

换句话说，重要的是要注意任何类型的基于字符串的验证只能检查语法是否无效。它无法检查用户是否确实可以看到电子邮件（例如，因为用户已经丢失了凭据、键入了其他人的地址或意外键入了工作电子邮件地址而不是给定用例的个人电子邮件地址）。您真正关心的问题有多少次是“这封电子邮件在语法上是否有效”而不是“我可以使用给定的电子邮件地址与用户进行通信”吗？如果您验证字符串的内容超过“它是否包含@”，那么您就是在尝试回答前一个问题。就我个人而言，我总是只对后一个问题感兴趣，即收件人能否真正阅读该消息？

\n

例如，如果我不小心输入mikok.rantalainen@gmail.com了我的电子邮件地址，您认为您可以真正验证该字符串而不尝试向我发送电子邮件吗？这显然是语法上有效的电子邮件地址，但我无法阅读发送到该地址的任何消息。这是您真正想要收集的电子邮件地址类型吗？

\n

此外，一些在语法或政治上可能无效的电子邮件地址确实有效。例如，postmaster@ai尽管 TLD 不应该有 MX 记录，但在实践中确实有效，因此这在语法上是无效的地址。另请参阅WHATWG 邮件列表（HTML5 最初设计的地方）上有关电子邮件验证的讨论。

\n

Answer 6

这是我用于所有表单电子邮件输入的示例.此示例是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-]+)*">

Answer 7

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

<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})(\]?)$">

你可以在这里找到更多的各种正则表达式。

Answer 8

我知道您不希望使用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('');
        }
    });
})