Question

所有代码均用于表单验证。我不明白的是JavaScript代码的一般概念。有人可以解释这个JavaScript代码背后的一般想法，并解释function validForm()和函数validBasedOnClass(thisClass)吗？非常感谢你。

此HTML页面包含用户在提交表单之前需要填写的表单字段。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Password Check</title>
    <link type="text/css" rel="stylesheet" href="script03.css" />
    <script type="text/javascript" src="script03.js"></script>
</head>
<body>
<form action="#">
    <p><label for="userName">Your name: <input type="text" size="30" id="userName" class="reqd" /></label></p>
    <p><label for="passwd1">Choose a password: <input type="password" id="passwd1" class="reqd" /></label></p>
    <p><label for="passwd2">Verify password: <input type="password" id="passwd2" class="reqd passwd1" /></label></p>
    <p><input type="submit" value="Submit" />&nbsp;<input type="reset" /></p>
</form>
</body>

此CSS文件设置无效表单元素的样式。

body {
    color: #000;
    background-color: #FFF;
}

input.invalid {
    background-color: #FF9;
    border: 2px red inset;
}

label.invalid {
    color: #F00;
    font-weight: bold;
}

此JavaScript执行表单检查。

window.onload = initForms;

function initForms() {
    for (var i=0; i< document.forms.length; i++) {
        document.forms[i].onsubmit = function() {return validForm();}
    }
}

function validForm() {
    var allGood = true;
    var allTags = document.getElementsByTagName("*");

    for (var i=0; i<allTags.length; i++) {
        if (!validTag(allTags[i])) {
            allGood = false;
        }
    }
    return allGood;

    function validTag(thisTag) {
        var outClass = "";
        var allClasses = thisTag.className.split(" ");

        for (var j=0; j<allClasses.length; j++) {
            outClass += validBasedOnClass(allClasses[j]) + " ";
        }

        thisTag.className = outClass;

        if (outClass.indexOf("invalid") > -1) {
            thisTag.focus();
            if (thisTag.nodeName == "INPUT") {
                thisTag.select();
            }
            return false;
        }
        return true;

        function validBasedOnClass(thisClass) {
            var classBack = "";

            switch(thisClass) {
                case "":
                case "invalid":
                    break;
                case "reqd":
                    if (allGood && thisTag.value == "") {
                        classBack = "invalid ";
                    }
                    classBack += thisClass;
                    break;
                default:
                    classBack += thisClass;
            }
            return classBack;
        }
    }
}

Answer 1

摘要：根据此代码，JS函数validForm将附加到此页面上所有表单的onSubmit事件。如果在这些元素上定义了css类名“reqd”，JS函数validForm将遍历表单检查的所有元素。如果classname是“reqd”并且元素的值为空，那么它会在该元素的css类名中追加一个特殊的css类名'invalid'，从而赋予该元素RED颜色。此外，JS代码也设置焦点，并且该无效元素和INPUT无效元素也将选择其文本。

validBasedOnClass JS函数基本上就是它的名字，即验证元素的类名是否为“reqd”AND，如果它的值为空。

Answer 2

一次一个部分：

window.onload = initForms;

function initForms() {
    for (var i=0; i< document.forms.length; i++) {
        document.forms[i].onsubmit = function() {return validForm();}
    }
}

这会在页面上设置任何表单，在提交之前首先调用validForm()，如果此函数返回false，则表单将不会被提交。

function validForm() {
    var allGood = true;
    var allTags = document.getElementsByTagName("*");

    for (var i=0; i<allTags.length; i++) {
        if (!validTag(allTags[i])) {
            allGood = false;
        }
    }
    return allGood;

<...snip...>

此部分抓取所有元素，并开始循环遍历它们，在每个元素上调用validTag函数，并将每个标记对象传递给该函数。如果validTag返回false，则变量allGood设置为false。完成所有元素的循环后，它会将allGood变量返回给上一节中提到的处理程序。如果是假，表单不会提交。

    function validTag(thisTag) {
        var outClass = "";
        var allClasses = thisTag.className.split(" ");

        for (var j=0; j<allClasses.length; j++) {
            outClass += validBasedOnClass(allClasses[j]) + " ";
        }

        thisTag.className = outClass;

        if (outClass.indexOf("invalid") > -1) {
            thisTag.focus();
            if (thisTag.nodeName == "INPUT") {
                thisTag.select();
            }
            return false;
        }
        return true;

validTag函数有一个参数，一个HTML标记。它查看应用于此标记的类名，并将它们中的每一个传递给函数validBasedOnClass。它会收集这些多个validBasedOnClass调用的结果，并将它们放入outClass变量中。然后代码检查outClass变量是否包含单词“invalid”，如果是，则给予元素键盘焦点，如果元素是INPUT类型标记，则文本突出显示，并返回false，因此上面的validForm函数现在会将allGood设置为false，并且不会提交表单。

        function validBasedOnClass(thisClass) {
            var classBack = "";

            switch(thisClass) {
                case "":
                case "invalid":
                    break;
                case "reqd":
                    if (allGood && thisTag.value == "") {
                        classBack = "invalid ";
                    }
                    classBack += thisClass;
                    break;
                default:
                    classBack += thisClass;
            }
            return classBack;
        }
    }
}

validBasedOnClass函数一次从给定标签查看一个类名，如果设置为'reqd'，则确保元素的值不为空，如果是，则返回原始类名和附加的类'invalid'。这会在validTag函数中触发上述记录的行为。

Answer 3

鉴于这直接来自 JavaScript＆amp;用于Web的Ajax：Visual QuickStart Guide，第7版 ¹，您在第167-171页的（逐行）说明中遇到了什么问题？

_{¹由我共同撰写，顺便说一句。}

有人可以为我解释这些JavaScript代码吗？

3 个答案: