j查询表单验证:分解电子邮件验证

Question

大家，

我

正在编写一个游戏，我有一个步骤，用户可以通过输入几个电子邮件地址将游戏分享给他的朋友。在此步骤中，我必须控制每个电子邮件地址的有效性。

我想分解检查电子邮件字段的脚本部分。我的功能有效，但如果的顺序有点奇怪......否则如果...

你能不能看一看，给我建议。谢谢

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

.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>

.JS

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 ([e-mail])');
        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();
    }
});

Answer 1

希哈！！我终于找到了解决方案，重构了 #btn 提交操作。这是解决方案：

    $('#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/