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

来源:互联网 发布:网络文化节有哪些活动 编辑:程序博客网 时间:2024/06/06 04:26
//修改了几个小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 boolfunction 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:         }     } }

0 0
原创粉丝点击