js学习笔记（四）表单验证

来源：互联网发布：用友通软件编辑：程序博客网时间：2024/05/23 00:09

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> New Document </TITLE><META NAME="Generator" CONTENT="EditPlus"><META NAME="Author" CONTENT=""><META NAME="Keywords" CONTENT=""><META NAME="Description" CONTENT=""><script src="script63.js"></script><style>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;}.centered{text-align:center;}</style></HEAD><BODY><h1 class="centered">Car Picker</h1><form action="SomeAction.cgi"><p><label for="emailAddr">Email Address:<input type="text" size=30 id="emailAddr" class="reqd email"></label></p><p><label for="color">Colors:  <select id="color" class="reqd"><option value="" selected>Choose a color</option><option value="red" >Red</option><option value="green" >Green</option><option value="blue" >Blue</option><option value="silver" >Silver</option></select></label></p><p><label for="sunroof">Options:<input type="checkbox" id="sunroof" value="Yes">Sunroof(Two door only)</input></label><label for="powerWindows"><input type="checkbox" id="powerWindows" value="Yes">Power Windows</input></label></p><p><label for="DoorCt" >Doors:   <input type="radio" id="twoDoor" name="DoorCt" value="Two">Two</input><input type="radio" id="fourDoor" name="DoorCt" value="Four">Four</input></label></p><p>Enter your Zip code or pick the dealer nearest you:<br><label for="zip">Zip:<input type="text" size="5" maxlength="5" id="zip" class="isZip dealerList"></label><select id="deakerList" class="zip" size=4><option value="Califomia-Lemon Grove">Califomia-Lemon Grove</option><option value="Califomia-Lomita">Califomia-Lomita</option><option value="Califomia-Long Beach">Califomia-Long Beach</option><option value="Califomia-Los Alamitos">Califomia-Los Alamitos</option></select></p><input type="submit" value="submit">  <input type="reset" value="reset"></form></BODY></HTML>

//有效性检查window.onload=initForm;function initForm(){for(var i=0;i<document.forms.length;i++){document.forms[i].onsubmit=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){invalidLabel(thisTag.parentNode);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;case "centered":case "radio":case "isNum":case "isZip":case "email":classBack+=thisClass;break;default:if(allGood&&!crossCheck(thisTag,thisClass)){classBack="invalid ";}classBack+=thisClass;}return classBack;}function crossCheck(inTag,otherFieldID){if(!document.getElementById(otherFieldID)){return false;}//return (inTag.value==document.getElementById(otherFieldID).value);return (inTag.value!=""||document.getElementById(otherFieldID).value!="");}function invalidLabel(parentTag){if(parentTag.nodeName=="LABEL"){parentTag.className+=" invalid";}}}}

脚本中SomeAction.cgi只是一个CGI程序的示例名称，（其字面意思是某种操作）可以执行需要的任何操作。

0 0