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

css文件：

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

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

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

select {
margin-left: 80px;
}

input {
margin-left: 30px;
}

input+select, input+input {
margin-left: 20px;
}

---

如果设置了

reqd

类，如果指定的控件为空，

validBasedOnClass

函数将返回类名

invalid

。在本例中，该类被添加到控件中。 如果添加了类

invalid

，控件也会获得焦点

因此，它基本上是一个表单验证器，确保在发布表单之前，应该填写所有带有类

reqd

的输入

但是如果你显然不知道代码的作用，那么你从哪里得到的代码呢？它似乎也是非常非结构化的代码。我不会用它。

• 在上面的代码中，validTag（thisTag）函数的作用是什么

validTag

功能检查所有

reqd

标签是否有效（如果标签为空，则标签无效）

• 什么是无效标识符

---

无效不是标识符，它是在

validBasedOnClass

函数中设置的类名（如果标记无效则设置）。（设置它的行是：

classBack=“invalid”

）

仔细阅读注释

function validTag(thisTag) {
    var outClass = "";
    var allClasses = thisTag.className.split(" ");
    /* <Array> allClasses = a list of all separate class names of `thisTag`*/

    /* This loop walks through all elements of the `allClasses` array, and
     * calls the `validBasedOnClasses` function (defined below). The return
     * value of the function is added to `outClass`, together with a space " "*/
    for (var j=0; j<allClasses.length; j++) {
        outClass += validBasedOnClass(allClasses[j]) + " ";
    }
    /*The class attribute of the element is set to the string `outClass`*/
    thisTag.className = outClass;

    /*Can the string "invalid" be found in the `outClass` string? */
    if (outClass.indexOf("invalid") > -1) {
        thisTag.focus();/* Puts the user focus to the element*/
        if (thisTag.nodeName == "INPUT") {
            /* Selects everything in the input, so that the user can easily
             * overwrite the contents of the input field*/
            thisTag.select();
        }
        return false; /*Invalid, return FALSE*/
    }
    return true; /*Valid, return TRUE*/

    /* <function> validBasedOnClass - a function used above
     * This function accepts a parameter, which equals one of the class names
     *  of the element */
    function validBasedOnClass(thisClass) {
        var classBack = ""; /* <string> classBack. This string will be returned*/

        switch(thisClass) {
            case "": /* An empty class name - Nothing to check*/
            case "invalid": /* "invalid" - Remove this class, so that the 
                             * code can validate again (when the "reqd" class
                             * is encountered) */
                break;
            case "reqd": /* class name == "reqd" */

                /* <boolean> `allGood` is defined at the main function.
                 * This function will only mark the FIRST invalid input field
                 * as defined in this function, and the main function */
                if (allGood && thisTag.value == "") {
                    classBack = "invalid "; /*Return class "invalid"*/
                }
                classBack += thisClass;
                /* `classBack` now holds "invalid reqd" or "reqd" */
                break;
            default:
                classBack += thisClass; /* Unknown class, ignore it */
        }
        return classBack; //Return the (altered) class
    }
}

---

您的代码将验证元素，并将焦点放在第一个无效的元素上

当用户提交表单并且其中一个字段无效时，

invalid

类可能是通过javascript添加的？@MrMisterMan该类是在他发布的javascript中添加的。从编写这部分脚本的人那里获取答案@AmGates我想她不会回答我！无法想象为什么不…这个类是在css文件@GolezTrol中声明的。请详细说明发生了什么。只要调用函数

validTag

，我就搞砸了。我想是的。但是好的。If

validTag

拆分元素的类以获得所有单独的类。它为该元素的每个类调用

validBasedOnClass

。如果类是

reqd

，它将检查该值是否为空。如果是，它将返回一个包含

无效

的字符串，然后在元素中设置该字符串。因此，如果所有空输入都有类

reqd

，那么它们会得到这个无效类。但正如你所说，你会搞砸，我也是。这段代码杂乱无章。还有更好的选择，比如我提到的JQuery库。@GolezTrol在阅读教程时，如果您想知道，

thisTag.className

实际上获取了thisTag的attibute

class

class

是一个保留字，这就是为什么在JavaScript中该属性被称为

className

此语句？函数的验证功能严重依赖

类

属性作为存储通道。例如：

class=“foo bar requd doo”

。当输入字段无效时，类将更改为

“foo bar reqd invalid”

。使用

thisTag.className=outClass保存此更改。我的意思是这句话需要什么？它有什么作用？然后…在这个脚本中，默认的case什么时候起作用？该语句正在用新的、可能已更改的类名字符串覆盖旧的
class
变量。“默认情况”意味着什么？我的意思是我没有看到默认情况应该起作用的情况。你看到了吗？
function validTag(thisTag) {
    var outClass = "";
    var allClasses = thisTag.className.split(" ");
    /* <Array> allClasses = a list of all separate class names of `thisTag`*/

    /* This loop walks through all elements of the `allClasses` array, and
     * calls the `validBasedOnClasses` function (defined below). The return
     * value of the function is added to `outClass`, together with a space " "*/
    for (var j=0; j<allClasses.length; j++) {
        outClass += validBasedOnClass(allClasses[j]) + " ";
    }
    /*The class attribute of the element is set to the string `outClass`*/
    thisTag.className = outClass;

    /*Can the string "invalid" be found in the `outClass` string? */
    if (outClass.indexOf("invalid") > -1) {
        thisTag.focus();/* Puts the user focus to the element*/
        if (thisTag.nodeName == "INPUT") {
            /* Selects everything in the input, so that the user can easily
             * overwrite the contents of the input field*/
            thisTag.select();
        }
        return false; /*Invalid, return FALSE*/
    }
    return true; /*Valid, return TRUE*/

    /* <function> validBasedOnClass - a function used above
     * This function accepts a parameter, which equals one of the class names
     *  of the element */
    function validBasedOnClass(thisClass) {
        var classBack = ""; /* <string> classBack. This string will be returned*/

        switch(thisClass) {
            case "": /* An empty class name - Nothing to check*/
            case "invalid": /* "invalid" - Remove this class, so that the 
                             * code can validate again (when the "reqd" class
                             * is encountered) */
                break;
            case "reqd": /* class name == "reqd" */

                /* <boolean> `allGood` is defined at the main function.
                 * This function will only mark the FIRST invalid input field
                 * as defined in this function, and the main function */
                if (allGood && thisTag.value == "") {
                    classBack = "invalid "; /*Return class "invalid"*/
                }
                classBack += thisClass;
                /* `classBack` now holds "invalid reqd" or "reqd" */
                break;
            default:
                classBack += thisClass; /* Unknown class, ignore it */
        }
        return classBack; //Return the (altered) class
    }
}

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

    for (var i=0; i<allTags.length; i++) { /*Walks through all elements*/
        if (!validTag(allTags[i])){ /*Checks whether an element is invalid or not*/
            allGood = false;
            /* `allGood` = false, notifies <function> allTags that an invalid
             * element has already been detected. */
        }
    }
   return allGood;

   ... //function validTag below