首頁 > 開發者 > JavaScript
標籤：script 基礎 mil 選擇 onsubmit 技術 javascrip ros tcl
使用者填寫表單後提交，伺服器端指令碼會先驗證資料，保證資料的正確性（比如資料是符合要求的內容、格式正確等）後再將資料交到資料庫儲存供以後使用。也可以在客戶機上用JavaScript進行表單驗證，比較快，使用者操作效率較高。雖然用JavaScript進行表單驗證有很多優點，不過有些使用者可能會關閉瀏覽器JavaScript功能或者不支援JavaScript，因此在伺服器端指令碼的表單驗證必不可少。
研究了《JavaScript基礎教程 第九版》[美·Dori Smith,Tom Negrino] 一書中對錶單進行處理驗證的方法，然後結合自己的記憶敲出了以下用於驗證表單建立必要欄位的代碼：
1 <!doctype html> 2 <html> 3 <head> 4 <title>建立必要欄位</title> 5 <meta charset="utf-8"> 6 <link rel="stylesheet" type="text/css" href="style.css"> 7 <script src="javascript.js"></script> 8 </head> 9 <body>10 <form action="#">11 <p><label for="userName">姓名：<input type="text" size="30" id="userName" class="reqd"></label></p>12 <p><label for="passwd1">密碼：<input type="password" id="passwd1" class="reqd"></label></p>13 <p><label for="passwd2">確認密碼：<input type="password" id="passwd2" class="reqd passwd1"></label></p>14 <p><input type="submit" value="提交"> <input type="reset" value="重設"></p>15 </form>16 </body>17 </html>
CSS檔案（style.css）:
1 body{color:#000;background-color: #fff;}2 input.invalid{background-color: #ff9;border:2px red inset;}3 label.invalid{color:#f00;font-weight:bold;}
JS(javascript.js)：
1 window.onload = function(){ 2 document.forms[0].onsubmit = validForm; 3 } 4 function validForm(){ 5 var allGood = true; 6 var allTags = document.forms[0].getElementsByTagName("*"); 7 for(var i=0;i<allTags.length;i++){ 8 if(!validTag(allTags[i])){ 9 allGood = false;10 }11 }12 return allGood; 13 function validTag(thisTag){14 var outClass = ""; //用於還原儲存一個標籤中的所有class15 16 //以空格為分隔字元分開一個標籤中的所有class17 var allClasses = thisTag.className.split(" "); 18 for(var j=0;j<allClasses.length;j++){19 outClass += validBasedOnClass(allClasses[j])+" ";20 //validBasedOnClass函數用於判斷一個標籤中的class是否有值reqd並且使用者是否未填文字框，若有reqd且使用者未填，
//則在當期class內追加一個值，invalid，把“reqd invalid”整個class返回給這裡的validBasedOnClass。詳情看下面代碼。21 }22 thisTag.className = outClass;23 if(outClass.indexOf("invalid")>-1){24 thisTag.focus();25 if(thisTag.nodeName=="INPUT"){26 thisTag.select();27 }28 return false;29 }30 return true;31 32 function validBasedOnClass(thisClass){33 var classBack = "";34 switch(thisClass){35 case "":36 case "invalid":37 break;38 case "reqd":39 if(allGood && thisTag.value == ""){40 classBack = "invalid ";41 }42 classBack += thisClass;43 break;44 default:45 classBack += thisClass;46 }47 return classBack;48 }49 }50 }
執行結果:
以上只是驗證必要欄位，這是最基礎的。其他的，如根據一個欄位對另一欄位進行檢查（如根據“密碼”檢查“確認密碼”是否相同）、標誌有問題欄位、根據一個欄位設定另一欄位（如上面的選項按鈕選擇其中一個後，下面的複選框只能選擇某些選項等）、驗證電子郵件格式等。這些都是以驗證必要欄位的代碼為基礎的，都將在以後進行補充。
用JavaScript進行表單驗證
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
