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

405

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


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

11

一种非常简单的解决方案是使用HTML5验证:

<form>
  <input type="email" required pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}">

  <input type="submit">
</form>

http://jsfiddle.net/du676/56/


10

这将执行更彻底的验证,例如会检查用户名中连续出现的句点,如john..doe@example.com

function isValidEmail(email)
{
    return /^[a-z0-9]+([-._][a-z0-9]+)*@([a-z0-9]+(-[a-z0-9]+)*\.)+[a-z]{2,4}$/.test(email)
        && /^(?=.{1,64}@.{4,64}$)(?=.{6,100}$).*/.test(email);
}

查看使用正则表达式在JavaScript中验证电子邮件地址


1
但是连续的点是否真的无效呢?相反,我认为这样做会排除有效的电子邮件地址。 - icktoofay

8
如果您有一个基本的表单,只需将输入类型设置为电子邮件:<input type="email" required>。这将适用于使用HTML5属性的浏览器,然后您甚至不需要JS。即使使用上述一些脚本进行电子邮件验证,也不会起到太大作用,因为以下内容都会被验证为“真实”电子邮件:
some@email.com so@em.co my@fakemail.net
等等...所以您最好确保用户必须输入两次其电子邮件地址,以确保他们输入相同的电子邮件地址。但是要保证电子邮件地址是真实的很困难,但如果有方法的话,那将非常有趣。但是如果您只是确保它是一个电子邮件,请坚持使用HTML5输入。 FIDDLE EXAMPLE 在FireFox和Chrome中有效。它在Internet Explorer中可能无法正常工作......但是Internet Explorer很烂,所以就这样...

正则表达式方法通常可以防止像a@b.c这样明显荒谬的电子邮件地址(您链接的JSFiddle示例在最新版本的Chrome中允许此类地址),因此HTML5解决方案显然是不足够的。 - SnowInferno
很酷。那么,为什么不像HTML5“应该”做的那样使用模式匹配呢?你为什么不在你的chromebook上尝试一下这个:http://jsfiddle.net/du676/8/ - isaac weathers

7
function isValidEmail(emailText) {
    var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\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]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([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(emailText);
};

使用方法如下:

if( !isValidEmail(myEmail) ) { /* do things if myEmail is valid. */ }

6
function validateEmail(emailaddress){  
   var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;  
   if(!emailReg.test(emailaddress)) {  
        alert("Please enter valid email id");
   }       
}

5
<script type = "text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type = "text/javascript">
    function ValidateEmail(email) {
        var expr = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
        return expr.test(email);
    };
    $("#btnValidate").live("click", function () {
        if (!ValidateEmail($("#txtEmail").val())) {
            alert("Invalid email address.");
        }
        else {
            alert("Valid email address.");
        }
    });
</script>
<input type = "text" id = "txtEmail" />
<input type = "button" id = "btnValidate" value = "Validate" />

5

我来到这里......最终来到了这里:https://html.spec.whatwg.org/multipage/forms.html#valid-e-mail-address

......其中提供了以下正则表达式:

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

我是通过jQuery验证插件的自述文件上的一条注释找到下面这个链接的:

https://github.com/jzaefferer/jquery-validation/blob/master/README.md#reporting-an-issue

因此,更新后的@Fabian回答如下:

function IsEmail(email) {
  var regex = /^[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])?)*$/;
  return regex.test(email);
}

希望这能有所帮助。

对我来说,这个答案是最好的 - 它在 john..doe@example.com 上返回了true,但我希望它为false。 - Adam Knights

4
这个问题看起来比较困难,需要更多思考才能回答。如果您想正确地处理电子邮件,那么需要了解这些内容。
世界上有很多人在寻找“能够胜任所有情况的正则表达式”,但实际上有很多不同的电子邮件提供商。
问题在哪里?“a_z@gmail.com”不可能存在,但是通过另一个提供商,“a__z@provider.com”这样的地址却可能存在。
为什么呢?按照RFC规定: https://en.wikipedia.org/wiki/Email_address#RFC_specification
我会引用一段文字来方便您的理解:
电子邮件地址的本地部分可以使用以下任意ASCII字符: 大写和小写拉丁字母A到Z和a到z; 数字0到9; 特殊字符!#$%&'*+-/ =?^_`{|}〜; 点.,只要它不是第一个或最后一个字符,除非用引号括起来,并且还必须避免连续出现,除非加以引用 (例如,John..Doe@example.com 不允许,但 "John..Doe"@example.com 允许); 请注意,某些邮件服务器通配符本地部分,通常是加号后面的字符,较少是减号后面的字符, 因此 fred+bah@domain 和 fred+foo@domain 可能会出现在与 fred+@domain 或甚至 fred@domain 相同的收件箱中。这对于标记邮件以进行排序(见下文)和垃圾邮件控制非常有用。 大括号 { 和 } 也经常用于这种方式,但较少使用。 空格和 “(),:;<>@[]” 字符是受限的(它们只允许在引号内使用,如下一段落所述,并且除此之外,反斜杠或双引号必须由反斜杠前置); 注释可以使用本地部分两端的括号,例如 john.smith(comment)@example.com 和 (comment)john.smith@example.com 等效于 john.smith@example.com。
所以,我可以拥有像这样的电子邮件地址:
A__z/J0hn.sm{it!}h_comment@example.com.co

如果您尝试此地址,我敢打赌它将在整个网络上发布的所有或大部分正则表达式中失败。但请记住,此地址遵循RFC规则,因此是有效的。
想象一下,我无法在任何地方注册并检查这些正则表达式的挫败感!
唯一真正能够验证电子邮件地址的人是电子邮件地址的提供者。
如何处理呢?
在几乎所有情况下,用户添加非有效电子邮件都无关紧要。您可以依赖HTML 5 input type="email",它接近RFC,很少会失败。 HTML5 input type="email"信息:https://www.w3.org/TR/2012/WD-html-markup-20121011/input.email.html 例如,这是一个符合RFC标准的电子邮件:
"very.(),:;<>[]\".VERY.\"very@\\ \"very\".unusual"@strange.example.com

但是HTML5验证会告诉您,@之前的文本不得包含例如 " 或 () 字符等,但实际上这是不正确的。
无论如何,您应该通过接受电子邮件地址并向该电子邮件地址发送电子邮件消息,其中包含用户必须访问以确认有效性的代码/链接来完成此操作。
在执行此操作时,一个好的做法是添加“重新输入电子邮件”的输入框,以避免用户输入错误。如果这对您来说还不够,请添加一个标题为“这是您当前的电子邮件吗?”的预提交模态窗口,然后是用户输入的电子邮件,放在h2标签中,以清楚地显示他们输入了哪个电子邮件,然后是一个“是的,提交”按钮。

3

jQuery验证插件中存在问题,只有@才会验证更改此内容

将代码更改为以下内容:

email: function( value, element ) {
    // From http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#e-mail-state-%28type=email%29
    // Retrieved 2014-01-14
    // If you have a problem with this implementation, report a bug against the above spec
    // Or use custom methods to implement your own email validation
    return this.optional( element ) || /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test( value );
}

3

为了那些想使用比破坏性的漫长正则表达式匹配更好维护的解决方案的人,我写了几行代码。想要节省字节数的人,请坚持使用正则表达式变体:)

这个解决方案限制了:

  • 字符串中不能有 @
  • 字符串中不能有点号
  • @后面不能有2个以上的点号
  • 用户名(@之前)中的无效字符
  • 字符串中 @ 的数量不能超过2个
  • 域名中的无效字符
  • 子域名中的无效字符
  • TLD(顶级域名)中的无效字符
  • TLD - 地址

不管怎样,仍然有可能泄漏信息,所以一定要将其与服务器端验证和电子邮件链接验证相结合。

这是 JSFiddle

 //validate email

var emailInput = $("#email").val(),
    emailParts = emailInput.split('@'),
    text = 'Enter a valid e-mail address!';

//at least one @, catches error
if (emailParts[1] == null || emailParts[1] == "" || emailParts[1] == undefined) { 

    yourErrorFunc(text);

} else {

    //split domain, subdomain and tld if existent
    var emailDomainParts = emailParts[1].split('.');

    //at least one . (dot), catches error
    if (emailDomainParts[1] == null || emailDomainParts[1] == "" || emailDomainParts[1] == undefined) { 

        yourErrorFunc(text); 

     } else {

        //more than 2 . (dots) in emailParts[1]
        if (!emailDomainParts[3] == null || !emailDomainParts[3] == "" || !emailDomainParts[3] == undefined) { 

            yourErrorFunc(text); 

        } else {

            //email user
            if (/[^a-z0-9!#$%&'*+-/=?^_`{|}~]/i.test(emailParts[0])) {

               yourErrorFunc(text);

            } else {

                //double @
                if (!emailParts[2] == null || !emailParts[2] == "" || !emailParts[2] == undefined) { 

                        yourErrorFunc(text); 

                } else {

                     //domain
                     if (/[^a-z0-9-]/i.test(emailDomainParts[0])) {

                         yourErrorFunc(text); 

                     } else {

                         //check for subdomain
                         if (emailDomainParts[2] == null || emailDomainParts[2] == "" || emailDomainParts[2] == undefined) { 

                             //TLD
                             if (/[^a-z]/i.test(emailDomainParts[1])) {

                                 yourErrorFunc(text);

                              } else {

                                 yourPassedFunc(); 

                              }

                        } else {

                             //subdomain
                             if (/[^a-z0-9-]/i.test(emailDomainParts[1])) {

                                 yourErrorFunc(text); 

                             } else {

                                  //TLD
                                  if (/[^a-z]/i.test(emailDomainParts[2])) {

                                      yourErrorFunc(text); 

                                  } else {

                                      yourPassedFunc();
}}}}}}}}}

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接