使用jQuery和正则表达式验证电子邮件地址

Question

我不太确定如何做到这一点。我需要使用正则表达式验证电子邮件地址，类似于这样：

[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+(?:[A-Z]{2}|com|org|net|edu|gov|mil|biz|info|mobi|name|aero|asia|jobs|museum)

然后我需要在 jQuery 函数中运行它，例如：

$j("#fld_emailaddress").live('change',function() { 
var emailaddress = $j("#fld_emailaddress").val();

// validation here? 

if(emailaddress){}

// end validation

$j.ajax({  
        type: "POST",  
         url: "../ff-admin/ff-register/ff-user-check.php",  
        data: "fld_emailaddress="+ emailaddress,  
        success: function(msg)
        { 
            if(msg == 'OK') { 
            $j("#fld_username").attr('disabled',false); 
            $j("#fld_password").attr('disabled',false); 
            $j("#cmd_register_submit").attr('disabled',false); 
            $j("#fld_emailaddress").removeClass('object_error'); // if necessary
            $j("#fld_emailaddress").addClass("object_ok");
            $j('#email_ac').html('&nbsp;<img src="img/cool.png" align="absmiddle"> <font color="Green"> Your email <strong>'+ emailaddress+'</strong> is OK.</font>  ');
            } else {  
            $j("#fld_username").attr('disabled',true); 
            $j("#fld_password").attr('disabled',true); 
            $j("#cmd_register_submit").attr('disabled',true);  
            $j("#fld_emailaddress").removeClass('object_ok'); // if necessary
            $j("#fld_emailaddress").addClass("object_error");
            $j('#email_ac').html(msg);
            }
        }
     });
});

验证应该放在哪里？表达式是什么？

- RussP

---

请参见https://dev59.com/_FLTa4cB1Zd3GeqPZEz2#15659649。 - goodeye

Answer 1

更新

• http://so.lucafilosofi.com/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 */ }

• 注意: 请记住，没有100%的正则表达式 可以验证电子邮件地址！

- Luca Filosofi

---

感谢 aSeptik，除了邮件地址中“e”的缺失外，它工作得很好。是的，我知道没有 100% 的正则表达式存在，但可以“相当”接近。 - RussP

没有做太深入的验证，但它已经给了我一个错误的正面反馈，显示 [e-mail]。 - gcb

在客户端上仅有正则表达式无法确定是否存在邮件服务器或者域名本身是否存在。它只是简单地检查任何电子邮件地址的语法是否正确，其唯一目的是帮助用户编写正确的地址，而不是进行验证。 - BerggreenDK

@aSeptik，我最近在编写的控件中使用了你的代码。希望你没意见。https://github.com/vpfaiz/EmailArea/ - Faiz

演示链接已恢复。 - Luca Filosofi

Answer 2

这是我的解决方案：

function isValidEmailAddress(emailAddress) {
    var pattern = new RegExp(/^[+a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i);
    // alert( pattern.test(emailAddress) );
    return pattern.test(emailAddress);
};

我找到了这个正则表达式：http://mdskinner.com/code/email-regex-and-validation-jquery。

- Bjørn Børresen

---

你关于加号的观点是正确的，但你的正则表达式不如我在示例中使用的那个好。顺便说一句，我已经更新了我的正则表达式以支持加号。 - Luca Filosofi

大多数情况下，您只想验证用户是否以正确的格式输入了电子邮件。识别类似于“2”而不是“@”的打字错误。因此，我更喜欢这个答案，但aSeptik的答案全面，我也投了赞成票。 - darwindeeds

[e-mail] 被认为是有效的 - 错误，请更改正则表达式。 - htngapi

Answer 3

$(document).ready(function() {
  $('#emailid').focusout(function(){
    $('#emailid').filter(function(){
      var email = $('#emailid').val();
      var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
      if ( !emailReg.test( email ) ) {
        alert('Please enter valid email');
      } else {
        alert('Thank you for your valid email');
      }
    });
  });                 
});

- webizon

---

实际上这很有帮助。标题写的是jQuery，到目前为止这是唯一一个具有像样jQuery示例的答案。 - Taylor Mitchell

这个验证 [e-mail]。 - NoBullMan

Answer 4

哈哈，这要好得多了。

    function isValidEmailAddress(emailAddress) {
        var pattern = new RegExp(/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/);
        return pattern.test(emailAddress);
    };

- Code Spy

---

我更喜欢你的移动网站解决方案。另一个会让我的智能手机烤化 ;) +1 - Hexodus

JavaScript中的语法问题 - Sajith

它将不会验证äüõ等字母！！ - D.A.H

Answer 5

我建议您使用jQuery插件来使用Verimail.js。

为什么？

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

如何操作？

在您的网站中包含verimail.jquery.js并使用该函数：

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

如果您有一个表单并希望在提交时验证电子邮件，您可以使用getVerimailStatus函数：

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

- Robin Orheden

---

Verimail在键盘输入时持续验证，这意味着一旦您开始输入，就会收到错误消息。通常是一个很棒的插件，但这个问题是一个破坏者 - 我更喜欢仅在手动触发时进行验证，即在单击提交按钮或离开字段之前进行验证。 - Sebastian Schmid

Answer 6

Javascript：

var pattern = new RegExp("^[_A-Za-z0-9-]+(\\.[_A-Za-z0-9-]+)*@[A-Za-z0-9]+(\\.[A-Za-z0-9]+)*(\\.[A-Za-z]{2,})$");
var result = pattern .test(str);

正则表达式不允许使用在以下情况下：

abc@gmail..com
[e-mail]..

允许：

[e-mail]
[e-mail]

来源: http://www.mkyong.com/regular-expressions/10-java-regular-expression-examples-you-should-know/

- sky91

Answer 7

我们还可以使用正则表达式（/^([\w.-]+)@([\w-]+)((.(\w){2,3})+)$/i）来验证电子邮件地址格式是否正确。

var emailRegex = new RegExp(/^([\w\.\-]+)@([\w\-]+)((\.(\w){2,3})+)$/i);
 var valid = emailRegex.test(emailAddress);
  if (!valid) {
    alert("Invalid e-mail address");
    return false;
  } else
    return true;

- Avinash

Answer 8

你可以使用这个函数

 var validateEmail = function (email) {

        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;


        if (pattern.test(email)) {
            return true;
        }
        else {
            return false;
        }
    };

- Nikki

Answer 9

试试这个

function isValidEmailAddress(emailAddress) {
    var pattern = new RegExp(/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/);
    return pattern.test(emailAddress);
};

- Purvik Dhorajiya

Answer 10

本地方法：

$("#myform").validate({
 // options...
});

$.validator.methods.email = function( value, element ) {
  return this.optional( element ) || /[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}/.test( value );
}

来源：https://jqueryvalidation.org/jQuery.validator.methods/

- BroFox