Could someone explain these javascript codes for me?_问答_开发者

All the codes are for a form validation. What I don't understand is the general idea of the JavaScript codes. Could someone explain the general idea behind this JavaScript code and also explain function validForm() and function validBasedOnClass(thisClass)? Thank you very much.

This HTML page contains form fields that are required to be filled out by the user before the form can be submitted.

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

This CSS file sets the style for invalid form elements.

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

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

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

This JavaScript does the form checking.

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

One section at a time:

window.onload = initForms;

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

This sets up any form on the page to first call the validForm() before it is submit, if this function returns false, the form won't be submitted.

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

This section grabs all elements, and starts looping through them, calling the validTag function on each one, and passing that function each tag object. If validTag returns false, then the variable allGood is set to false. Once looping through all of the elements is complete, it returns the allGood variable back to the handler mentioned in the previous section. If it is false, the form doesn't submit.

    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 function takes 1 parameter, an HTML tag. It looks at the class names applied to this tag and passes each of them to the function validBasedOnClass. It collects the results of those multiple validBasedOnClass calls and puts them into the outClass variable. The code then checks if the outClass variable contains the word "invalid", if it does, the element is given keyboard focus, and if the element is an INPUT type tag, the text is highlighted, and false is returned, so validForm function above will now set allGood to false and the form won't be submitted.

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

The validBasedOnClass function looks at one class name at a time from a given tag, and if it is set to 'reqd' then it makes sure that the element's value is not blank, if it is, it returns both the original class name, and the class 'invalid' appended to it. Which triggers the above documented behavior in the validTag function.

In Summary: As per this code JS function validForm is being attached to onSubmit event of all the forms on this page. JS function validForm is iterating through all the elements of form checking if the css classname "reqd" is defined on those elements. If classname is "reqd" and value is blank on an element then it is appending a special css classname 'invalid' in the css classnames of that element thus giving that element RED color. Additionally JS code is also setting focus and on that invalid element and INPUT invalid element will also have their text selected.

validBasedOnClass JS function is basically doing what its name is, i.e. validating if an element's classname has "reqd" AND if its value is blank.

Given that this is straight out of JavaScript & Ajax for the Web: Visual QuickStart Guide, 7th edition¹, what in particular are you having trouble with in the (line-by-line) explanation on pages 167-171?

_{¹ Co-written by me, btw.}