有人能给我解释一下这些javascript代码吗？_Javascript_Validation_Forms

有人能给我解释一下这些javascript代码吗？

javascript validation forms

有人能给我解释一下这些javascript代码吗？,javascript,validation,forms,Javascript,Validation,Forms,所有代码都用于表单验证。我不理解的是JavaScript代码的总体概念。有人能解释一下这个JavaScript代码背后的基本思想，并解释一下函数validForm（）和函数validBasedOnClass（thisClass）？多谢各位此HTML页面包含用户在提交表单之前需要填写的表单字段 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml

所有代码都用于表单验证。我不理解的是JavaScript代码的总体概念。有人能解释一下这个JavaScript代码背后的基本思想，并解释一下

函数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>

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

        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;
        }
    }
}

此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;
        }
    }
}

window.onload=initForms；
函数initForms（）{
对于（var i=0；i对于（var i=0；i总结：根据此代码，JS函数validForm将附加到此页面上所有表单的onSubmit事件。JS函数validForm将迭代表单的所有元素，检查css类名“reqd”是否在这些元素上定义。如果类名为“reqd”如果元素上的值为空，则在该元素的css类名中添加一个特殊的css类名“invalid”，从而使该元素呈现红色。此外，JS代码还将设置焦点，并在该无效元素和输入无效元素上选择文本
validBasedOnClass JS函数基本上是按照其名称进行操作，即验证元素的类名是否为“reqd”，以及其值是否为空。
一次一节：
window.onload = initForms;

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

本节获取所有元素，并开始循环遍历它们，对每个元素调用validTag
函数，并将该函数传递给每个标记对象。如果validTag
返回false，则变量allGood设置为false。循环遍历所有元素完成后，将返回allGood
变量返回上一节提到的处理程序。如果为false，则表单不会提交
    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;

validBasedOnClass
函数一次查看给定标记中的一个类名，如果设置为'reqd'，则确保元素的值不为空，如果为空，则返回原始类名和附加到它的类'invalid'。这将触发validTag
功能。
鉴于这是直接从JavaScript和Ajax for the Web:Visual QuickStart Guide，第7版1开始编写的，您在167-171页的（逐行）解释中遇到了什么特别的问题
1由我合著，顺便说一句。
是我吗？还是说，每当有人在提到某个代码时说“这些代码”时，你们中的其他人也会在里面死一点？这是我的愿景，还是这些函数嵌套在一起？@toby:很高兴“代码”没有以“z”结尾@Eli:Yes，validBasedOnClass
和validTag
是validForm函数中的私有函数。这个问题中的代码取自JavaScript和Ajax for the Web，VisualQuickStart Guide，第7版。我是这本书的主要作者。因为这本书逐行清楚地解释了代码，所以我得出结论e你是一个要求别人帮你做作业的学生。这充其量只是学业上的懒惰，至少不是很酷。非常感谢你的帮助。你做得很好。你可以很容易地登上s.O.的前五名海报位置。查看此分析；-）（搜索你的名字）…谢谢@Sheller，非常有帮助。
        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;
        }
    }
}