電子郵件驗證的jQuery

Question

可能重複：
JQuery validate e-mail address regex

您好我有一個形式引用到電子郵件輸入字段提交的輸入，當用戶點擊提交按鈕，我想以確保電子郵件輸入字段值具有這樣的形式

example@hotmail.com 

或

example@gmail.com 

或

example@yahoo.com 

和輸入字段是該

<p> 
      <label>Email</label> 
      <input type="text" name="Email"/> 
      <span class="errorMessage"></span> 
     </p> 

jQuery代碼

$(document).ready(function(){ 
    $('#suform').on('submit', function(e){ 
     e.preventDefault(); 
     var errorCount = 0; 
     $('span.errorMessage').text(''); // reset all error mesaage 
     $('input').each(function(){ 
      var $this = $(this); 
      if($this.val() === ''){ 
       var error = 'Please fill ' + $this.prev('label').text(); // take the input field from label 
       $this.next('span').text(error); 
       errorCount = errorCount + 1; 
      } 
     }); 
     if(errorCount === 0){ 
      var mobileNumber = $('input[name=MNumber]'); 
      var email = $('input[name=Email]'); 
      if(isNaN(parseFloat(mobileNumber)) && !isFinite(mobileNumber)) { 
       var error = 'Mobile number incorect.'; 
       $('input[name=MNumber]').next('span').text(error); 
       errorCount = errorCount + 1; 
      }else{  
       var password= $('input[name="Password"]').val(); 
       var repass= $('input[name="RePassword"]').val(); 
       if(password!=repass){ // ensrue the two passwords are the same 
        var error2 = 'Password not matching'; 
        $('input[name="RePassword"]').next('span').text(error2) 
        errorCount = errorCount + 1; 
       }else{ 
        $(this)[0].submit(); // submit form if no error 
       } 
      } 
     } 
    }); 
}); 

我的HTML，CSS和jQuery代碼是在這裏 code

Answer 1

如果我的理解正確，您想驗證填寫在表格上的電子郵件地址：

添加到您的功能

// validate proper email address 
var reg = /^((([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; 

if (reg.test(value) == false) { 
    // email invalid, do stuff 
} else { 
    // email valid, do stuff 
} 

這個正則表達式檢查提供了很多很多問題的電子郵件！

編輯：

你的功能有一些錯別字，這是完全正常：和working Fiddle!

$(document).ready(function(){ 

    // form submit 
    $('#suform').on('submit', function(e){ 

     // prevent default behavior 
     e.preventDefault(); 

     // reset errors counter 
     var errorCount = 0; 

     // clear error message 
     $('span.errorMessage').text(''); 

     // run by each input field to check if they are filled 
     $('input').each(function(){ 

      var $this = $(this); 

      if($this.val() === ''){ 
       // take the input field from label 
       var error = 'Please fill ' + $this.prev('label').text(); 
       $this.next('span').text(error); 
       errorCount = errorCount + 1; 
      } 
     }); 

     // no errors so far, let continue and validate the contents 
     if(errorCount === 0){ 

      // get mobile number 
      var mobileNumber = $('input[name=MNumber]').val(); 

      // get email address 
      var email = $('input[name=Email]').val(); 

      // get password and password repeat 
      var password= $('input[name="Password"]').val(); 
      var repass= $('input[name="RePassword"]').val(); 

      // regular expression to validate the email address 
      var reg = /^((([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; 

      // try to validate the email 
      if (reg.test(email) == false) { 
       $('input[name=Email]').next('span').text('Email address is invalid!'); 
       errorCount = errorCount + 1; 
      } else { 

       if(isNaN(parseFloat(mobileNumber)) && !isFinite(mobileNumber)) { 
        var error = 'Mobile number incorect.'; 
        $('input[name=MNumber]').next('span').text(error); 
        errorCount = errorCount + 1; 
       } else { 
        // ensrue the two passwords are the same 
        if(password!=repass){ 
         var error2 = 'Password not matching'; 
         $('input[name="RePassword"]').next('span').text(error2); 
         errorCount = errorCount + 1; 
        }else{ 
         $(this)[0].submit(); // submit form if no error 
        } 
       } 
      } 
     } 
    }); 
}); 

Answer 2

您可以使用此功能：

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

Answer 3

正則表達式驗證的一種方式：

function validateEmail(email) { 
    var re = /^(([^<>()[\]\\.,;:\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,}))$/; 
    return re.test(email); 
} 

傳遞用戶輸入的電子郵件給這個函數，它會檢查它的甲酸和返回true或false