一个带有超级罗嗦注释的-------JS表单验证

//修改了几个小BUG.......完善一下

window.onload = initForms;

var crossType = {Password:1,NotAllIsEmpty:2 };

function initForms() {
    //获取全部窗口,对所有窗口设置onsubmit事件--void validForm
    if (document.getElementByIdx_x) {
        for (var i = 0; i < document.forms.length; i++) {
            document.forms[i].onsubmit = validForm;
        }
        //针对某些特殊选项,改变后会影响其他值,则可以类似下面的代码做相应
        var inputTag = document.getElementsByTagName_r("input");
        for (var j = 0; j < inputTag.length; j++) {
            if (inputTag[j].type == "checkbox") {
                inputTag[j].onclick = doorSet;
            }
        }
    }
}

//return bool
function validForm() {
    //获取窗口的所有标签,存放在一个数组allTags中
    var allTags = document.getElementsByTagName_r("*");
    var allGood = true; //true时代表全部标签状态合格
    for (var j = 0; j < allTags.length; j++) {
        if (!validTags(allTags[j])) {
            allGood = false;

        }
    }
    return allGood;


    //return bool
    function validTags(thisTag) {
        //每一个标签都有一个或多个class,需要遍历一次,再调用string validBassedOnClass(thisClass)方法检测是否
        var outClass = "";
        var classNames = thisTag.className.split(" ");
        for (var k = 0; k < classNames.length; k++) {
            outClass += validBassedOnClass(classNames[k]) + " "; //要添加" ",否则返回的类都连接在一起了
        }
        //调用string validBassedOnClass(thisClass)方法后,需要判断当前标签class是否包含valid
        //有则返回false

        thisTag.className = outClass; //将修改过的类名重新放回,若有valid时则样式会有变化
        if (outClass.indexOf("invalid") > -1) {
            //出错时可以做一些提醒
            thisTag.focus();
            if (thisTag.nodeName == "INPUT") {
                thisTag.select();
            }
            if (document.getElementByIdx_x("error")) {
                document.getElementByIdx_x("error").innerHTML = "检测到出错啦!";
            }
             invalidLabel(thisTag.parentNode);
            return false;
        }
        return true;


        //return string
        function validBassedOnClass(thisClass) {
            //相关代码
            //thisClass可能包含各种信息,它告诉你是需要做不为空验证,还是做对比验证还是不做验证
            //所以用一个switch来作为区分
            //            var classBack = thisClass + " ";
            //            switch (thisClass) {
            //                case "":
            //                case "valid":
            //                    break;
            //                case "reqd":
            //                    if (allGood && thisTag.value == "") {
            //                        classBack += "valid";
            //                    }
            //                    break;
            //                default:
            //            }
            //            return classBack;
            //上面一行代码有大问题,看似很正常,其实是错的
            //如果类名本身包含valid的话,则无论标签内容是否合格都会一直包含有valid,所以需要改进
            //改进正确代码如下
            var classBack = "";
            switch (thisClass) {
                //所有的验证规则都可以通过在下面添加一个case去实现  
                //如果不能一行代码完成的，则用一个方法封装功能
                case "":
                case "isNum":
                case "isZip":
                case "email":
                case "invalid":
                    break;
                case "radio":
                    if (allGood && !radioWasPicked(thisTag.name)) {
                        classBack = "invalid ";
                    }
                    classBack += thisClass;
                    break;
                case "reqd":
                    if (allGood && thisTag.value == "") {
                        classBack = "invalid ";
                    }
                    classBack += thisClass;
                    break;
                default:
                    //假如出现页面中的类出现非上面所述的即为根据其他字段进行检查,如密码核对等
                    if (allGood && !crossCheck(thisClass,crossType.NotAllIsEmpty)) {
                        classBack = "invalid ";
                    }
                    classBack += thisClass;
            }
            return classBack;
        }
        //额外功能,出现错误时改变CSS
        function invalidLabel(parentTag) {
            //添加相关代码即可实现动态样式提醒
            if (parentTag.nodeName == "LABEL") {
                parentTag.className += "invalid " + parentTag.className;
            }
        }

        //表单验证
        //return bool
        function crossCheck(thisClass, selectType) {
            var boolBack = false;
            if (!document.getElementByIdx_x(thisClass)) {
                return false;
            }
            switch (selectType) {
                case crossType.Password:
                    boolBack = (thisTag.value == document.getElementByIdx_x(thisClass).value);
                    break;
                case crossType.NotAllIsEmpty:
                    boolBack = (thisTag.value != "" || document.getElementByIdx_x(thisClass).value != "");
                    break;
                default:
            }
            return boolBack;
        }

        //return bool
        //验证radio是否至少选中一个,注意,radio是按照Name来分组
        //所以需要对具备相同name的标签进行遍历
        function radioWasPicked(radioName) {
            var radioSet = "";
            for (var m = 0; m < document.forms.length; m++) {
                if (!radioSet) {
                    radioSet = document.forms[m][radioName];
                }
            }
            if (radioSet) {
                for (var n = 0; n < radioSet.length; n++) {
                    if (radioSet[n].checked) {
                        return true;
                    }
                }
            }
            return false;
        }

     }
 }

 //当选择sunroof时,则让twoDoor被自动选中
 function doorSet() {
     radioSet = "";
     if (this.checked) {
         switch (this.id) {
             case "sunroof":
                 var radioTwoDoor = document.getElementByIdx_x("twoDoor");
                 radioTwoDoor.checked = true;
                 for (var m = 0; m < document.forms.length; m++) {
                     if (!radioSet) {
                         radioSet = document.forms[m][radioTwoDoor.name];
                     }
                 }
                 for (var i = 0; i < radioSet.length; i++) {
                     radioSet[i].disabled = true;
                 }
                 break;
             case "pWindows":
                 break;
             default:
         }

     }
     if (!this.checked) {
         switch (this.id) {
             case "sunroof":
                 var radioTwoDoor = document.getElementByIdx_x("twoDoor");
                 radioTwoDoor.checked = false;
                 for (var m = 0; m < document.forms.length; m++) {
                     if (!radioSet) {
                         radioSet = document.forms[m][radioTwoDoor.name];
                     }
                 }
                 for (var i = 0; i < radioSet.length; i++) {
                     radioSet[i].disabled = false;
                 }
                 break;
             case "pWindows":
                 break;
             default:
         }
     }
 }