javascript - 当 JavaScript 中的一项检查无效时，表单验证会中断

Question

我有一个包含两个文本区域的表单，每个文本区域都涉及一组邮件。

<form name="myform" action='entryupdate.php' method="post">
    <textarea name="mailgroup1" rows="2" cols="50" onchange="checkFormValue();">
    </textarea>
    <textarea name="mailgroup2" rows="2" cols="50" onchange="checkFormValue();">
    </textarea>
    <input name="update" type="submit" value="Update description"/>
</form>

我有一个函数可以根据我们的内部规范检查电子邮件的格式是否正确。

function checkmail(component){
    var emailpattern = /^[A-z0-9\._-]+@[A-z0-9][A-z0-9-]*(\.[A-z0-9_-]+)*\.([A-z]{2,6})$/;
    var mails = component.value.split(/[\n\r\t ]+/);
    var valid = true;
    for(var i=0; i<mails.length; i++){
        valid = valid && emailpattern.test(mails[i]);
        alert("Mail: "+mails[i]+" Valid: "+ emailpattern.test(mails[i]));
    }
    if(valid){
        component.setAttribute('class', 'valid');
    }else{
        component.setAttribute('class', 'invalid');
    }
    return valid;
}

如果字段的类设置为无效，则应用以下样式:

.invalid
{
background-color:#fffacd;
}

当其中一个文本区域中的值发生更改时，将调用以下函数，该函数检查是否有任何值的格式不正确，如果是这种情况，则禁用提交按钮。

function checkFormValue(){
    var validform = true;
    validform = validform && checkmail(document.myform.mailgroup1) && checkmail(document.myform.mailgroup2);
    document.hotfixomat.update.disabled = !validform;
}

问题是，如果第一次检查返回 false，则不会进行第二次检查，如果碰巧该值的格式不正确，则不会更改样式。 (但提交按钮被禁用)。为什么检查会中断？

Answer 1

这就是您如何在最后一位获取 validform 变量的原因。 JavaScript 的工作方式与许多其他语言类似，如果不可能为 true，则不会在 bool AND 中进一步进行操作:

var validform = true;
validform = validform && checkmail(document.myform.mailgroup1) && checkmail(document.myform.mailgroup2);

如果第一个 checkmail() 为 false，则不必执行第二个，因为 validform 不可能为 true。如果您设置var validform = false，那么它甚至不会执行任何检查邮件功能。

示例:http://jsfiddle.net/jonathon/Ndw9K/

如果您想确保两者都被调用，那么您可以将其分开并执行如下操作:

var validForm1 = checkmail(document.myform.mailgroup1),
    validForm2 = checkmail(document.myform.mailgroup2),
    validForm = validForm1 && validForm2;

或者，您可以更改您的方法，以便它遍历您想要验证的所有元素，并更改变量并返回该变量。

一个基本示例:

function checkmailElements(myarray){
    var returnVal = true;

    for(var i = 0; i< myarray.length; i++){
        if( !checkmail(myarray[i]) ){
            returnVal = false;
        }
    }

    returnVal;
}