一个带有超级罗嗦注释的-------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
- 一个带有超级罗嗦注释的-------JS表单验证
- 一个注册表单验证的js
- 一个关于form表单验证的js
- 一个简单的表单验证JS
- JS的表单验证!
- 超级强大的表单验证代码
- 一个注册会员页面中:表单验证的js
- 关于validate验证表单与js语法的一个bug
- 一个简单的表单提交页面,通过js进行验证
- 个人编写的一个JS表单验证插件
- 通用的JS表单验证
- 常用的表单验证js
- 简单的JS表单验证
- js实现的表单验证
- 简单的JS表单验证
- js表单的各种验证
- JS实现表单的验证
- 常用的Js表单验证
- IT系统故障引起的一个事故的思考
- 云计算概述
- CXF学习01---开发服务端与客户端
- Python学习(一):入门篇:python中的一些数据结构
- 每天一个C++小程序(十四)--堆排序
- 一个带有超级罗嗦注释的-------JS表单验证
- 并查集类的c++封装,比较union_find algorithm四种实现方法之间的性能差别
- Android开发学习框架目录(要掌握的核心内容)
- socket中的bind函数
- UML_用例图
- 拆分大的git库到多个独立git库
- 蓝牙4.0BLE国内市场开始发力,2014年产品规划
- 关于旅游,读书笔记
- Uniform Generator uva