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的表单验证：比化电子邮件验证

回答

相关问题