在填寫表單時可能希望用戶必須填寫某些字段或者兩段填寫的字段相匹配，然后才能提交表單，這里就可以用js來實現
下面是建立一個基礎表單的HTML代碼
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset = "utf-8"> 5 <title>Password check</title> 6 <link rel="stylesheet" type="text/css" href="p6_3.css"> 7 <script src="p6_3.js"></script> 8 </head> 9 <body> 10 <form action="#"> 11 <p><label for="userName">Your name:<input type="text" size="30" id="userName" class="reqd"></label></p> 12 13 <p><label for="passewd1">Choose a password:<input type="password" id="password1" class="reqd"></label></p> 14 15 <p><label for="password2">Verify your password:<input type="password" id="password2" class="reqd passwd1"></label></p> 16 17 <input type="submit" value="Submit"> <input type="reset" value="reset"> 18 </form> 19 </body> 20 </html>
以下是添加的簡單CSS代碼：
1 body{ 2 color: #000; 3 background-color: #fff; 4 font-family: verdana; 5 font-style: italic; 6 } 7 8 input.invalid{ 9 background-color: #ff9; 10 border:2px red inset; 11 } 12 13 label.invalid{ 14 color: #f00; 15 font-weight: bold; 16 }
以下是js代碼（是js基礎教程上的，感覺有些復雜，應該是可以簡單的，不過里面的邏輯值得學習下）：
1 window.onload = initForm; 2 3 function initForm(){ 4 for(var i=0; i<document.forms.length; i++){ 5 document.forms[i].onsubmit = validForm;//當要提交表單時調用validForm函數 6 //如果返回false則不將表單提交給相應的CGI 7 } 8 } 9 function validForm(){ 10 var allTags = document.getElementsByTagName("*");//獲取所有的元素 11 var allGood = true;//定義一個標志作為函數返回值 12 13 for(var i=0;i<allTags.length;i++){ 14 15 if(!validTag(allTags[i])){ //用For循環一個個標簽用validTags檢驗 16 17 allGood = false; //如果檢驗返回值為false 說明有問題，標志也設為false 18 } 19 } 20 21 return allGood; //最后返回allGood 22 23 function validTag(thisTag){ 24 var outClass = ""; 25 26 var allClass = thisTag.className.split(" ");//split(" ")函數根據空格號分隔字符串為一個個小的字符串，比如"hello world"就會變為"hello" "world" 27 if(allClass.length>1){ 28 for(var i=0;i<allClass.length;i++){ //將由一個元素類名得到的小的字符串分別去驗證 29 alert(allClass[i]); //這里是用於測試看看每次點擊提交后類名都發生了什么變化 30 } 31 alert("over"); 32 } //以上的For循環剛開始不用管 33 34 for(var j=0 ; j<allClass.length ; j++){ 35 outClass += validBasis(allClass[j])+" ";//用validBasis驗證，返回的新類名后面都加空格 36 } 37 thisTag.className = outClass; 38 if(outClass.indexOf("invalid") > -1){ //如果類名中有invalid證明有問題 39 invalidLabel(thisTag.parentNode); 40 this.focus(); //獲得焦點 41 if(thisTag.nodeName == "INPUT"){ 42 thisTag.select(); //如果是input標簽則選擇它的值讓用戶更易修改 43 } 44 return false; 45 } 46 47 return true; 48 49 50 function validBasis(thisClass){ 51 52 var classBack = ""; 53 switch(thisClass){ 54 case "": 55 case "invalid": 56 break; 57 case "reqd": 58 /*alert("hello");*/ 59 if(allGood && thisTag.value == ""){ 60 61 classBack = "invalid ";//注意這里的空格！ 62 63 } 64 65 classBack += thisClass;//保證不丟失原來類名，這樣多次點擊就不會失效 66 break; 67 default: 68 if(allGood && !crossCheck(thisTag,thisClass)){ 69 classBack = "invalid "; 70 } 71 classBack += thisClass; 72 73 } 74 return classBack; 75 } 76 77 function crossCheck(inTag,otherFieldId){//最后驗證兩次輸入的密碼是否一致 78 if(!document.getElementById(otherFieldId)){ 79 return false; 80 } 81 return(inTag.value == document.getElementById(otherFieldId).value); 82 } 83 84 function invalidLabel(parentTag){ 85 if(parentTag.nodeName == "LABEL"){ 86 parentTag.className += " invalid"; 87 } 88 } 89 } 90 }
要點：這里用到了一個字符串分割函數split(),比如var str="hello world",str1 = str.split(" "), str1最后可以得到一個字符串數組{"hello","world"},所以可以看到"invalid "里都加了空格。這樣就可以保存元素的多個類名，當用戶多次點擊提交時能夠得到正常處理