HTML5 电子邮件验证

Posted 2023-03-15

【中文标题】HTML5 电子邮件验证

【英文标题】：HTML5 Email Validation

【发布时间】：2013-11-05 12:17:30

【问题描述】：

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

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

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

【问题讨论】：

您始终需要在服务器端进行验证。聪明的客户端可以绕过任何客户端安全措施。

This answer 在尝试设置 HTML5 表单验证时可能会有所帮助。当然，您可能仍然需要服务器端验证。

在任何情况下都不应使用正则表达式电子邮件验证。正则表达式检查有太多缺陷。 “验证”电子邮件地址的最佳方法是简单地让他们键入两次并运行正则表达式检查，向用户发出警告，如果它与模式不匹配，它看起来不像是有效的电子邮件地址，并且要求用户仔细检查。这样，如果它实际上是有效的，但正则表达式失败（就像它经常发生的那样），用户可以承认他们知道它是有效的并继续。太多网站使用正则表达式验证，这让许多用户感到沮丧。

我推荐查看这篇文章：debounce.io/blog/articles/email-validation-for-html5-forms

要求用户输入两次相同的电子邮件地址是没有用的。如果您不知道他们的电子邮件地址，要求输入两次并不会提高几率。如果他们确实知道他们的电子邮件地址，要求输入两次只是糟糕的 UI。

【参考方案1】：

在 HTML5 中你可以这样做：

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

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

【讨论】：

这里的模式有什么好处？将类型指定为电子邮件已经包含一个内置模式来确定这一点。

@RichBradshaw：是的，你是对的。无需指定模式（我只是从 OP 复制代码，我现在更正了 :)）

@MichaelDeMutis：你可以使用required属性

该电子邮件不会检查电子邮件中的.com。它只检查@符号。前任。我可以输入example@gmail 并保存表格。虽然它不是一个有效的电子邮件地址。是否有解决方法可以正确检查[e-mail]？

@Liz。 example@gmail 可能不是有效的电子邮件，但它是有效的电子邮件地址格式。

【参考方案2】：

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

使用pattern="[a-zA-Z]3,@[a-zA-Z]3,[.]1[a-zA-Z]2,[.]1[a-zA-Z]2," 将要求格式为[e-mail] 但是，如果发件人的格式为[e-mail]（或类似格式），则无法验证以解决此问题，您可以输入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 或类似名称。

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

【讨论】：

在任何情况下都不应使用正则表达式检查。模式太多，缺陷也太多。例如，[e-mail] 被许多正则表达式检查视为无效，而实际上它是 100% 有效的。正则表达式是我和许多其他用户方面的眼中钉，它必须去。需要使用另一种方法来确保用户输入有效的电子邮件地址。

还要注意，例如，postmaster@ai 是一个有效的电子邮件地址，这个正则表达式也会禁止它。 （来源：serverfault.com/q/154991/104798）

Email Validation DeBounce 等工具也推荐与 HTML5 一起使用。

【参考方案3】：

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
>

【讨论】：

您必须插入不带两个 '/' 以及开始 '^' 和结束 '$' 符号的模式。喜欢这些[a-zA-Z0-9.!#$%&’*+/=?^_`|~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*

@Victor 对不起，你有一部分是错的。这个符号很重要，没有它们，模式将开始匹配字符串中的任何地方并使其无用。你是对的地方是让斜线出来。

@Victor 你的回答对我有用。 OP 的正则表达式给了我一个误报，以匹配表单的要​​求，即使它是一个有效的电子邮件地址。可能是我没有使用常规的 HTML，而是使用 React JS 来渲染 HTML 表单。

@vikramvi 看来 OP 编辑​​了答案，所以我不能再确定了。出于我的目的，这个正则表达式很复杂。我通常会做类似/..+@.+\...+/

@vikramvi 标记正则表达式的开始和结束。否则，它用于转义下一个字符或符号。见：developer.mozilla.org/en-US/docs/Web/javascript/Guide/…

【参考方案4】：

我知道您不喜欢 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('');
        
    );
)

【讨论】：

请不要只发布链接答案。只需将链接的基本部分放在您的答案中

【参考方案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: [e-mail])" 
    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: [e-mail])" 
    pattern="[a-zA-Z0-9!#$%&amp;'*+\/=?^_`|~.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*">

【参考方案6】：

将[a-zA-Z0-9.-_]1,@[a-zA-Z.-]2,[.]1[a-zA-Z]2, 用于[e-mail] / [e-mail]

【讨论】：

这个正则表达式对电子邮件地址提出了许多不恰当的要求——例如，它拒绝具有一个或两个字母用户名的电子邮件地址，或者托管在一个字母域名上的电子邮件地址.

已编辑。谢谢@duskwuff

仍然拒绝单字母域名。

这允许 1 个字母/数字域：[a-zA-Z0-9.-_]1,@[a-zA-Z0-9.-]1,[. ]1[a-zA-Z0-9]2,

还要注意，例如，postmaster@ai 是一个有效的电子邮件地址，这个正则表达式也会禁止它。 （来源：serverfault.com/q/154991/104798）

【参考方案7】：

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

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

在 Chrome 中测试。

【讨论】：

如果您在表单元素中包含required 属性，它将不允许在表单元素为空的情况下提交表单。

【参考方案8】：

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

长答案：

David Gilbertson wrote about this 多年前：

我们需要问两个问题：

用户是否明白他们应该输入电子邮件 地址到这个字段？ 用户是否正确输入了他们自己的电子邮件 地址到这个字段？

如果您有一个布局合理且带有标签的表单 上面写着“电子邮件”，用户在某处输入一个“@”符号，然后 可以肯定地说他们明白他们应该是 输入电子邮件地址。很简单。

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

不可能。

[...]

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

[...]

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

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

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

【参考方案9】：

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

<input type="email"/>

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

【讨论】：

但是，这不会使“abc@gmail”之类的情况无效。

是的，我想是的，我想验证用户是否输入了 gmail 或 hotmail，例如，如果我的用户输入了其他，那么不要让他们继续我的登录，你知道我该怎么做吗？

【参考方案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>

参考：In W3Schools

【讨论】：

<input type="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]2,$" title="please enter valid email [[e-mail]]."> 您也可以添加标题以显示有效性消息。

【参考方案11】：

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

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

【参考方案12】：

According to MDN，这个正则表达式可以验证电子邮件，因为符合规范的电子邮件应该匹配它。

/^[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])?)*$/

【参考方案13】：

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

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

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

如果提供了无效的邮箱，邮箱地址会被转换为占位符（相当于一个空输入），所以如果邮箱是必填的，表单就不能在这里提交是网站https://debounce.io/