jQuery的表單驗證：比化電子郵件驗證

我編碼一個遊戲，我有一個步驟，其中，用戶可以通過輸入幾個電子郵件地址分享遊戲給他的朋友。在這一步中，我必須控制每個電子郵件地址的有效性。

我想分解檢查電子郵件字段的腳本部分。我的功能是有效的，但它有點奇怪if ... else的順序如果...

你可以請看它，並給我建議。感謝

HTML

<form id="form-noel" method="post" enctype="multipart/form-data" action="#ok"> 
    <h3>Share the game !</h3> 
    <p> 
     <label for="email1">Email 1</label> 
     <input type="text" id="email1" name="email1" /> 
     <label id="error-email1" class="error"></label> 
    </p> 
    <p> 
     <label for="email2">Email 2</label> 
     <input type="text" id="email2" name="email2" /> 
     <label id="error-email2" class="error"></label> 
    </p> 
    <p> 
     <label for="email3">Email 3</label> 
     <input type="text" id="email3" name="email3" /> 
     <label id="error-email3" class="error"></label> 
    </p> 
    <p class="textcenter"><input type="submit" id="btn-submit" value="Share" /></p> 
</form>

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); 
} 

function checkEmail(emailVal, named){ 
    if(!isValidEmailAddress(emailVal)){ 
     $('#'+named).addClass('error'); 
     $('#error-'+named).show().attr('title', 'Merci de saisir une adresse email valide ([email protected])'); 
     return false; 
    } 
    else { 
     $('#'+named).removeClass('error'); 
     $('#error-'+named).hide().removeAttr('title'); 
     return true; 
    } 
} 

$('#btn-submit').click(function(event){ 
    event.preventDefault(); 

    var email1Val = $('#email1').val(); 
    var email2Val = $('#email2').val(); 
    var email3Val = $('#email3').val(); 

    if(email1Val != '' && email2Val != '' && email3Val != ''){ 
     if(checkEmail(email1Val, 'email1') && checkEmail(email2Val, 'email2') && checkEmail(email3Val, 'email3')){ 
      $('#form-noel').submit(); 
     } 
    } 
    else if(email1Val != '' && email2Val != ''){ 
     if(checkEmail(email1Val, 'email1') && checkEmail(email2Val, 'email2')){ 
      $('#form-noel').submit(); 
     } 
    } 
    else if(email1Val != '' && email3Val != ''){ 
     if(checkEmail(email1Val, 'email1') && checkEmail(email3Val, 'email3')){ 
      $('#form-noel').submit(); 
     } 
    } 
    else if(email2Val != '' && email2Val != ''){ 
     if(checkEmail(email2Val, 'email2') && checkEmail(email3Val, 'email3')){ 
      $('#form-noel').submit(); 
     } 
    } 
    else if(email1Val != ''){ 
     if(checkEmail(email1Val, 'email1')){ 
      $('#form-noel').submit(); 
     } 
    } 
    else if(email2Val != ''){ 
     if(checkEmail(email2Val, 'email2')){ 
      $('#form-noel').submit(); 
     } 
    } 
    else if(email3Val != ''){ 
     if(checkEmail(email3Val, 'email3')){ 
      $('#form-noel').submit(); 
     } 
    } 
    else { 
     $('#form-noel').submit(); 
    } 
});

來源

2013-10-24 Didav

爲什麼你使用if ..人在這裏。無論如何，您在last else條件下提交的電子郵件值爲空。你能更新你的代碼你的代碼應該如何表現嗎？ – Unknown

Hiha！我終於找到解決方案，重構＃btn-submit上的操作。這裏的解決方案：

$('#btn-submit').click(function(event){ 
     event.preventDefault(); 

     var email1Val = $('#email1').val(); 
     var email2Val = $('#email2').val(); 
     var email3Val = $('#email3').val(); 
     var error = false; 

     for(i=1; i<=3; i++) { 
      if($('#email'+i).val() != ''){ 
       if(!checkEmail($('#email'+i).val(), 'email'+i)){ 
        error = true; 
       } 
      } 
     } 
     if(!error){$('#form-noel').submit();} 
    });

http://jsfiddle.net/5H5ZL/2/

來源

2013-10-24 12:17:27 Didav

jQuery的表單驗證：比化電子郵件驗證

回答

相關問題