Question

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

如何在用户输入后验证电子邮件？没有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>

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

Error Message

Answer 2

input type=email网站的www.w3.org页面指出，电子邮件地址是与以下正则表达式匹配的任何字符串：

/^[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

以下是我用于所有表单电子邮件输入的示例。此示例是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 6

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

此外，通过使用JS，您可以动态地将验证添加到站点内电子邮件类型的所有输入字段，而不必修改每个输入字段。

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('');
        }
    });
})

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

您可以找到更多各种here的正则表达式。

Answer 8

唯一100％正确的方法是在输入的电子邮件地址中的某处检查@ -sign，然后将验证消息发布到给定的电子邮件地址。如果他们可以按照电子邮件中的验证说明操作，则输入的电子邮件地址是正确的。

David Gilbertson wrote about this年前：

我们需要提出两个问题：


用户是否了解他们应该输入电子邮件   地址进入此字段？

用户是否正确输入了他们的电子邮件   地址进入此字段？

如果你有一个带有标签的布局合理的表格   那说“电子邮件”，然后用户在某处输入“@”符号   可以肯定地说他们明白他们应该是   输入电子邮件地址。容易。

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

不可能。

[...]

任何错误输入肯定会导致错误的电子邮件地址，但只有可能会导致电子邮件地址无效。

[...]

如果电子邮件地址“有效”，尝试计算是没有意义的。用户输入错误且有效的电子邮件地址的可能性远远大于输入无效的电子邮件地址。

此外，某些可能在语法上或政治上无效的电子邮件地址也可以使用。例如，postmaster@ai does technically work even though TLDs should not have MX records。另请参阅discussion about email validation on the WHATWG mailing list（首先设计HTML5）。

Answer 9

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

使用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（或类似），则无法通过验证来解决此问题，您可以{{1}这将验证“.com.au或.net.au或类似。

但是使用它，它不允许someone@email.com验证。因此，仅仅使用HTML5来验证电子邮件地址仍然不完全与我们同在。要完成此操作，您将使用以下内容：

pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}"

或：

<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>

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

Answer 10

您也可以遵循这种模式

<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>

Ref：In W3Schools

Answer 11

According to 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])?)*$/

Answer 12

使用HTML 5，只需输入以下电子邮件：

<input type="email"/>

当用户将鼠标悬停在输入框上时，他们将显示一个工具提示，指示他们输入有效的电子邮件。但是，Bootstrap表单的工具提示消息要好得多，可以告诉用户输入电子邮件地址，并在输入的值与有效电子邮件不匹配时弹出。

HTML5电子邮件验证

12 个答案: