表单校验原理

<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 {
 color: #000;
 background-color: #FFF;
}
input.invalid {
 background-color: #FF9;
 border: 2px red inset;
}
label.invalid {
 color: #F00;
 font-weight: bold;
}

提交执行表单校验脚本

window.onload = initForms;

function initForms() {
     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) {
         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;
 }