如何使用JQuery验证电子邮件地址？

Question

如何使用JQuery验证电子邮件地址？

- DuH

---

在尝试“验证”电子邮件地址之前，您应该阅读此内容：https://hackernoon.com/the-100-correct-way-to-validate-email-addresses-7c4818f24643 - Mikko Rantalainen

Answer 1

你可以使用普通的JavaScript来做到这一点：

function isEmail(email) {
  var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  return regex.test(email);
}

- Fabian

---

没问题，记住jQuery仍是JavaScript :) - Fabian

尽管该正则表达式认为大多数真实世界中的电子邮件地址都是有效的，但它仍然存在很多误报和漏报。例如，请参阅维基百科上的有效和无效电子邮件地址示例。 - Arseny

随着新的顶级域名变得越来越普遍，这个正则表达式可能需要修改。现在，.systems和.poker等都是有效的顶级域名，但它们无法通过正则表达式检查。 - Liath

根据Theo在另一个答案中的评论，您应该将 var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/; 更改为 var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,6})+$/; 以支持像.museum等新TLD。 - Ira Herman

要跟上适用于电子邮件地址的正则表达式的最新信息，您可以查看https://emailregex.com/。目前它是```/^(([^<>()[]\.,;:\s@"]+(.[^<>()[]\.,;:\s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/```。 - DrCJones

Answer 2

jQuery验证电子邮件的函数

我不喜欢使用插件，特别是当我的表单只有一个需要验证的字段时。 我使用这个函数，在需要验证电子邮件表单字段时调用它。

 function validateEmail($email) {
  var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
  return emailReg.test( $email );
}

现在可以使用这个了

if( !validateEmail(emailaddress)) { /* do stuff here */ }

- Manish Shrivastava

---

你只需返回 emailReg.test($email);。 - nffdiogosilva

请注意，这个函数对于一个空的电子邮件地址返回true。举个例子：emailReg.text("") 返回 true。我建议将函数简化为只声明emailReg变量和以下内容：return ($email.length > 0 && emailReg.test($email))。请注意保持原文意思不改变，并使翻译更加通俗易懂。 - Diziet

电子邮件地址验证的正则表达式已经过时，因为现在我们有6个字符的域名扩展名，例如.museum，因此您需要将var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;更改为var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,6})?$/;。 - Theo

没错，@h.coates！我来到这个帖子是希望找到jQuery内置的电子邮件验证功能。走开吧，这里没有你要找的内容。 - iGanja

@Theo提出的观点非常重要，但是顶级域名的实际长度应该超过6个字符，因为其理论上限是63个字符。目前最长的顶级域名已经超过了20个字符，请参见http://data.iana.org/TLD/tlds-alpha-by-domain.txt。 - Jeroenv3

Answer 3

请查看http://bassistance.de/jquery-plugins/jquery-plugin-validation/。这是一个很好的jQuery插件，可以帮助您为表单构建强大的验证系统。 这里有一些有用的示例。因此，表单中的电子邮件字段验证将如下所示：

$("#myform").validate({
  rules: {
    field: {
      required: true,
      email: true
    }
  }
});

请参见电子邮件方法文档以获取详细信息和示例。

- Andrew Bashtannik

---

最后一个仍然存活着。 - Andrew Bashtannik

但是目前接受的格式是x@x（这很奇怪），必须要是x@x.x。我该如何解决？ - Basheer AL-MOMANI

@BasheerAL-MOMANI [https://jqueryvalidation.org/jQuery.validator.methods/] $.validator.methods.email = function( value, element ) { return this.optional( element ) || //^.+@.+\..+$/.test( value ); } - Bill Gillingham

Answer 4

我会使用jQuery验证插件，原因有几个。

你已经完成了验证，那么接下来呢？你需要显示错误信息，并在有效时处理清除它，也许还要显示总共有多少个错误？它可以为你处理很多事情，无需重新发明轮子。

此外，另一个巨大的好处是它托管在CDN上，目前版本在回答时可以在这里找到：http://www.asp.net/ajaxLibrary/CDNjQueryValidate16.ashx 这意味着客户端加载时间更快。

- Nick Craver

---

好的，不需要重新发明轮子。但为什么我要安装几十K字节的JavaScript来验证一个字段呢？这就像如果你只需要一个新轮子，却要建造一座汽车工厂 :) - kraftb

如我所说，这与仅仅验证文本本身不同，它涉及到验证的处理和展示方式。 - Nick Craver

感谢@NickCraver提供的这篇文章，它真的很符合处理电子邮件验证问题的“最佳实践”方法。这绝对不像是建造一个工厂（编写库来完成所有工作）以获得一个轮子。这更像是按照工厂的说明在现代汽车上安装轮子（千万不要忘记先升起车子，放置轮子，然后再加紧螺母），而不是试图弄懂如何在你的车上安装木质车轮。这个插件非常简单易用。要进行表单验证，只需要包含一些注释和一个方法调用即可。 - jfgrissom

现在你正在重新发明“重复造轮子”的比喻！ - Dom Vinyard

对于那些被困在WebForms应用程序中的人 http://encosia.com/using-jquery-validation-with-asp-net-webforms/ - Jerreck

简单的区别是：如果想要(A)完整的验证功能套件；(B)可能会跟上标准和浏览器怪癖，请使用jQueryValidate插件。如果：(A)你只想验证电子邮件地址，而不想下载推土机来挖一个6英寸的洞；(B)你不介意自己更新代码，请使用本地正则表达式函数。 - ReverseEMF

Answer 5

<script type="text/javascript">
    $(document).ready(function() {
      $('.form_error').hide();
      $('#submit').click(function(){
           var name = $('#name').val();
           var email = $('#email').val();
           var phone = $('#phone').val();
           var message = $('#message').val();
           if(name== ''){
              $('#name').next().show();
              return false;
            }
            if(email== ''){
               $('#email').next().show();
               return false;
            }
            if(IsEmail(email)==false){
                $('#invalid_email').show();
                return false;
            }

            if(phone== ''){
                $('#phone').next().show();
                return false;
            }
            if(message== ''){
                $('#message').next().show();
                return false;
            }
            //ajax call php page
            $.post("send.php", $("#contactform").serialize(),  function(response) {
            $('#contactform').fadeOut('slow',function(){
                $('#success').html(response);
                $('#success').fadeIn('slow');
               });
             });
             return false;
          });
      });
      function IsEmail(email) {
        var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
        if(!regex.test(email)) {
           return false;
        }else{
           return true;
        }
      }
  </script>

<form action="" method="post" id="contactform">
                            <table class="contact-table">
                              <tr>
                                <td><label for="name">Name :</label></td>
                                <td class="name"> <input name="name" id="name" type="text" placeholder="Please enter your name" class="contact-input"><span class="form_error">Please enter your name</span></td>
                              </tr>
                              <tr>
                                <td><label for="email">Email :</label></td>
                                <td class="email"><input name="email" id="email" type="text" placeholder="Please enter your email" class="contact-input"><span class="form_error">Please enter your email</span>
                                  <span class="form_error" id="invalid_email">This email is not valid</span></td>
                              </tr>
                              <tr>
                                <td><label for="phone">Phone :</label></td>
                                <td class="phone"><input name="phone" id="phone" type="text" placeholder="Please enter your phone" class="contact-input"><span class="form_error">Please enter your phone</span></td>
                              </tr>
                              <tr>
                                <td><label for="message">Message :</label></td>
                                <td class="message"><textarea name="message" id="message" class="contact-input"></textarea><span class="form_error">Please enter your message</span></td>
                              </tr>
                              <tr>
                                <td></td>
                                <td>
                                  <input type="submit" class="contactform-buttons" id="submit"value="Send" />
                                  <input type="reset" class="contactform-buttons" id="" value="Clear" />
                                </td>
                              </tr>
                            </table>
     </form>
     <div id="success" style="color:red;"></div>

- user1993920

Answer 6

MVC/ASP.NET 中的Javascript电子邮件验证

在使用Fabian的答案时，我遇到的问题是在MVC视图中实现它，因为有Razor @符号。您必须包含一个额外的@符号来转义它，如下所示：@@

在MVC中避免使用Razor

function isEmail(email) {
  var regex = /^([a-zA-Z0-9_.+-])+\@@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  return regex.test(email);
}

我在这个页面上没有看到它，所以我认为这可能会有帮助。

编辑

这是微软的一个链接，描述了它的用法。
我刚刚测试了上面的代码，并得到了以下js：

function validateEmail(email) {
  var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/; 
  return regex.test(email);
}

它正在准确地执行它应该执行的任务。

- Trevor Nestman

---

@nbrogi 你是什么意思，这不起作用？我刚刚再次检查了一下，这会生成以下js var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;。你的代码出了什么问题？ - Trevor Nestman

抱歉，目前我不确定，我已经完全改变了它。 - nkkollaw

请告诉我您何时方便。如果这是错误信息，那么我会将其删除。我尽可能地提供有用的信息，并且在编写MVC视图中的正则表达式时，这对我很有帮助。 - Trevor Nestman

我想知道为什么这个被踩了。它完全做到了我想要的，即在.cshtml中生成正则表达式中的@符号。通常它会尝试将@符号后面的所有内容视为Razor代码，但双重的@@可以防止这种情况发生。 - Trevor Nestman

我看到的主要问题在于第二个代码块中，你的正则表达式被设置为一个名为regex的变量，但第二行使用了一个名为re的变量。 - phlare

@phlare 很好的发现。谢谢。 - Trevor Nestman

Answer 7

<!-- Dont forget to include the jQuery library here -->
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {

    $("#validate").keyup(function(){

        var email = $("#validate").val();

        if(email != 0)
        {
            if(isValidEmailAddress(email))
            {
                $("#validEmail").css({
                    "background-image": "url('validYes.png')"
                });
            } else {
                $("#validEmail").css({
                    "background-image": "url('validNo.png')"
                });
            }
        } else {
            $("#validEmail").css({
                "background-image": "none"
            });         
        }

    });

});

function isValidEmailAddress(emailAddress) {
    var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
    return pattern.test(emailAddress);
}

</script>

<style>
    #validEmail
    {
        margin-top: 4px;
        margin-left: 9px;
        position: absolute;
        width: 16px;
        height: 16px;
    }

    .text
    {
        font-family: Arial, Tahoma, Helvetica;
    }
</style>

    <title>Live Email Validation with jQuery Demo</title>
</head>
<body>
    <div class="text"><h1>Reynoldsftw.com - Live Email Validation</h1><h2>Type in an email address in the box below:</h2></div>
    <div><input type="text" id="validate" width="30"><span id="validEmail"></span></div>
    <div class="text"><P>More script and css style

: www.htmldrive.net

---

来源：htmldrive.com

- SwatiKothari

Answer 8

• http://so.devilmaycode.it/jquery-validate-e-mail-address-regex/（网址）
• 使用新的正则表达式
• 增加了对地址标签（+号）的支持

function isValidEmailAddress(emailAddress) {
    var pattern = /^([a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)*|"((([ \t]*\r\n)?[ \t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*(([ \t]*\r\n)?[ \t]+)?")@(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i;
    return pattern.test(emailAddress);
};

if( !isValidEmailAddress( emailaddress ) ) { /* do stuff here (email is invalid) */ }

这段内容来自用户Luca Filosofi在此回答中提供

- Amila kumara

---

如果您在ASP.NET MVC Razor页面中使用此内容，请不要忘记使用另一个@字符对@字符进行转义，即使用@@。否则，将导致构建错误。 - Rosdi Kasim

Answer 9

我建议使用Verimail.js，它还有一个JQuery插件。

为什么？Verimail支持以下功能：

• 语法验证（根据RFC 822）
• IANA TLD验证
• 拼写建议适用于最常见的TLD和电子邮件域名
• 拒绝临时电子邮件帐户域，例如mailinator.com

因此，除了验证外，Verimail.js还提供建议。因此，如果您键入具有错误TLD或域的电子邮件，该域非常类似于常见的电子邮件域（hotmail.com，gmail.com等），它可以检测到并建议更正。

示例：

• [e-mail]-> 您是否意味着test@ gmail.com ？
• [e-mail]-> 您是否意味着test@hey. net ？
• [e-mail]-> 您是否意味着test@ hotmail.com ？

等等……

要将其与jQuery一起使用，只需在您的网站上包含 verimail.jquery.js 并运行下面的函数：

$("input#email-address").verimail({
    messageElement: "p#status-message"
});

消息元素是一个用于显示消息的元素。这可以是任何内容，从“您的电子邮件无效”到“你是否指的是……？”。

如果您有一个表单，并希望限制它，以便除非电子邮件有效，否则无法提交，那么您可以使用 getVerimailStatus 函数来检查状态，如下所示：

if($("input#email-address").getVerimailStatus() < 0){
    // Invalid
}else{
    // Valid
}

该函数根据对象Comfirm.AlphaMail.Verimail.Status返回一个整数状态码。但是一般的经验法则是，任何小于0的代码都表示错误。

- Robin Orheden

---

.getVerimailStatus() 不会返回数字状态码，只会返回字符串值 success、error 或者可能是 pending（最后一个没有验证）。 - Niko Nyman

Answer 10

正如其他人所提到的，您可以使用正则表达式来检查电子邮件地址是否符合模式。但是，仍然可能存在符合模式但仍然会弹回或是虚假垃圾邮件的电子邮件。

使用正则表达式进行检查

var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
return regex.test(email);

使用真实的电子邮件验证API进行检查

您可以使用API来检查电子邮件地址是否真实并且目前处于活动状态。

var emailAddress = "[e-mail]"
response = $.get("https://isitarealemail.com/api/email/validate?email=" +
    emailAddress,
    function responseHandler(data) {
        if (data.status === 'valid') {
            // the email is valid and the mail box is active
        } else {
            // the email is incorrect or unable to be tested.
        }
    })

更多信息请参见https://isitarealemail.com或博客文章

- Stephen