Question

由于某种原因，我的验证功能很有效，直到我尝试传入一个从函数中收到的变量。目前，以下工作正常，但是当我取消注释txtValue时，它无效。

function validate(formName) {

// create an object array to hold all html nodes
var formNodes = formName.getElementsByTagName("*");
var formNodesLength = formNodes.length;
// placeholder for error codes
var error = "";
// error style
var borderStyle = "3px solid #bbd531";
var txtValue = "";

// loop and find all nodes with the attribute "validate"
for (x=0; x<formNodesLength; x++) {

    if(formNodes[x].getAttribute("data-validation")){

        nodeValue = formNodes[x].value;
        nameValue = formNodes[x].getAttribute("name");
        validateValue = formNodes[x].getAttribute("data-validation");

        if (validateValue=="text" && (nodeValue==null || nodeValue=="")) { //if text match failed
        alert(nameValue);
            /*txtValue = findLabelValue();*/
            error += /*txtValue + */" is required<br />";
            formNodes[x].style.border=borderStyle;
        }
        else if (validateValue=="email" && !nodeValue.match(/\b[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b/i)) { //if email match failed
            error += "email must be a valid address<br />";
            formNodes[x].style.border=borderStyle;
        }
        else if (validateValue=="phone" && !nodeValue.match(/\b[0-9]{3}-[0-9]{3}-[0-9]{4}\b/)) { //if phone match failed
            error += "phone must be a valid<br />";
            formNodes[x].style.border=borderStyle;
        }
        else if (validateValue=="website" && !nodeValue.match(/\b[a-zA-Z0-9\-\.]+\.[A-Z]{2,4}\b/i)) { //if website match failed
            error += "website must be a valid address<br />";
            formNodes[x].style.border=borderStyle;
        }
    }
}

if(error) {
    var formElement = "<div id='error-box'><strong>There was a problem with your submission</strong><br /></div>" + formName.innerHTML;
    formName.innerHTML = formElement;
    document.getElementById("error-box").innerHTML = error;
return false;
}
else {
    return true;
}


function findLabelValue() {
    var labelTagObj = formName.getElementsByTagName("label");
    var returnValue = "";

    for (x=0; x<labelTagObj.length; x++) {

        if (labelTagObj[x].getAttribute("for") == nameValue) {
            returnValue = labelTagObj[x].innerText;
            return returnValue;
        }
    }
} // End findLabelValue()


} // End validate(formName)

Answer 1

这是因为您在x循环中使用全局变量for作为计数器。

当您调用findLabelValue()函数时，它会将全局x设置为0，并运行循环，这会干扰validate()函数中的主循环。

在两个函数中使用var x以确保它不是全局的。

这是你正在做的事情，缩短以使其更清晰。

function validate(formName) {
    // ...
    // loop using the `x` variable as a counter
    for (x=0; x<formNodesLength; x++) {
        if(formNodes[x].getAttribute("data-validation")){
            // ...
            if (validateValue=="text" && (nodeValue==null || nodeValue=="")) {
                // Invoke the other function
                txtValue = findLabelValue();
            }
            // ...
        }
    }

    // ...

    function findLabelValue() {
        // ...
        // OOPS. you've altered the same `x` being used by the other loop
        for (x=0; x<labelTagObj.length; x++) {
            // ...
        }
    } 
}

在这两个函数中，x=0应为var x=0。

当我引入从函数调用传递的变量时，循环不能正常工作

1 个答案: