html - 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.comsomemail@email.com.vn

Answer 4

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

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

在 Chrome 中测试。

Answer 5

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

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

我知道您不喜欢 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 8

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

长答案：

大卫吉尔伯森几年前写道：

我们需要问两个问题：

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

如果您有一个布局良好的表单，其标签上写着“电子邮件”，并且用户在某处输入了一个“@”符号，那么可以肯定地说他们明白他们应该输入一个电子邮件地址。简单的。

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

不可能。

[...]

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

[...]

尝试确定电子邮件地址是否“有效”是没有意义的。与输入无效电子邮件地址相比，用户输入错误且有效的电子邮件地址的可能性要大得多。

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

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

Answer 9

你也可以按照这个模式

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

参考 :在 W3Schools

Answer 10

使用 HTML 5，只需将输入电子邮件设为：

<input type="email"/>

当用户将鼠标悬停在输入框上时，他们将显示一个工具提示，指示他们输入有效的电子邮件。然而，Bootstrap 表单有一个更好的工具提示消息来告诉用户输入一个电子邮件地址，它会在输入的值与有效的电子邮件不匹配时弹出。

Answer 11

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

仅使用 HTML5 属性“模式”很难正确验证电子邮件。如果您不使用“模式”someone@ 将被处理。这不是有效的电子邮件。

使用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.au 或 .net.au 或类似的。

但是使用这个，它不会允许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 模式属性验证两个或所有版本的电子邮件地址。

Answer 13

如果您只是学习 HTML 并且想要一个简单的解决方案，则此代码将为您完成工作

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

但是，如果您是专业人士并且想要安全并保持数据库清洁，那么有一个名为 DeBounce API 的付费服务，它会在前端验证电子邮件，这样您就不会在数据中收到无效的电子邮件，它的工作原理是这样的，

如果提供了无效的电子邮件，则电子邮件地址将被转换为占位符（等于空输入），因此如果电子邮件字段为必填字段，则无法在此处提交表单，网址为https://debounce。 io/