打造可複用可擴充javascript驗證表單指令碼

如果需要從使用者那裡收集資訊，就需要使用表單。

表單包含大多數常見的圖形介面元素，例如文字框，選項按鈕，複選框，下拉式功能表等等。

填寫完表單，點擊Submit按鈕將表單發送給web伺服器，儘管可以通過伺服器CGI程式完成驗證，但在用戶端用javascript驗證要快得多，而且使用者操作的效率也高。

這篇部落格,主要是把我寫的一個用於驗證表單的可複用,可擴充的javascript指令碼（版本1.0）分享給大家.

先來看看實現效果：

1、初始表單

2、提交，

如果Email為空白,則：

3、如果Email不符合規範,則：

4、如果沒有選擇下拉框內容,則：

5、如果沒有選擇選項按鈕中的一個,則：

6、根據已選欄位,自動選擇其他欄位:選擇NormalUser會自動選擇2G

驗證兩個至少選一個:如果沒有輸入地址,也沒有選擇地址,則:

7、驗證郵編：如果輸入錯誤的郵編則：

8、驗證檔案：如果輸入錯誤的Image格式,則：

javascript指令碼（ValidForm1.js）：

// JavaScript Documentwindow.onload=initForms;function initForms(){for (var i=0;i<document.forms.length;i++){//遍曆所有表單，執行驗證document.forms[i].onsubmit=function(){return validForm();}};//為複選框NormalUser註冊事件document.getElementById("NormalUser").onclick=spaceSet;};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="";//獲得該標籤的class屬性var allClasses=thisTag.className.split(" ");for (var j=0;j<allClasses.length;j++){//驗證該標籤，通過改變class標識無效標籤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;//標識無效的欄位，添加類名invalidfunction validBasedOnClass(thisClass){var classBack="";//驗證，在這裡可以擴充驗證switch(thisClass){case "":case "invalid":break;case "reqd":    //判斷空if (allGood && thisTag.value=="")//invalid後有空格{classBack="invalid ";};classBack += thisClass;break;    case "radio":    //檢查是否已選單選框if(allGood && !radioPicked(thisTag.name)){classBack="invalid ";};classBack += thisClass;break;case "isNum"://檢查是否是數字if(allGood && !isNum(thisTag.value)){classBack="invalid ";};classBack += thisClass;break;case "isEmail"://檢查是否是Emailif(allGood && !isEmail(thisTag.value)){classBack="invalid ";};classBack += thisClass;break;case "isImage"://檢查是否是圖片，可以演化為檢查檔案名稱if(allGood && !isImg(thisTag.value)){classBack="invalid ";};classBack += thisClass;break;case "isPostcode":    //檢查郵遞區號    if(allGood && !isPostcode(thisTag.value)){classBack="invalid ";};classBack += thisClass;break;case "isAddress":classBack += thisClass;break;default:   //invalid後有空格   //檢查是否至少已經設定了兩個欄位之一   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!="")};//標識出有問題的欄位的標籤function invalidLabel(parentTag){if(parentTag.nodeName=="LABEL"){//invalid前有空格parentTag.className += " invalid";};};//確保使用者選擇了一個選項按鈕function radioPicked(radioName){var radioSet="";//迴圈遍曆表單，如果找到要找選項按鈕組，radio就會包含一個值for (var k=0;k<document.forms.length;k++){//將radioSet設定為正在查看的表單中選項按鈕組的名稱if(!radioSet){radioSet=document.forms[k][radioName];};};//如果不能找到選項按鈕組，則返回false，不能選擇選項按鈕if(!radioSet){return false;}//檢查每個選項按鈕，如果有一個被選中，則返回truefor(k=0;k<radioSet.length;k++){if(radioSet[k].checked){return true;};};//沒有發現被選中選項按鈕，則返回false    return false;};//驗證是否是數字function isNum(passedVal){//如果欄位是空的，那麼肯定不是數組，直接返回False就可以了if (passedVal==""){return false;}for(var k=0; k<passedVal.length;k++){        //charAt函數返回欄位位置K上的字元，檢查是否為數字if(passedVal.charAt(k)<"0"){return false;}if (passedVal.charAt(k)>"9"){return false;}};  return true};    //純javascript檢查郵箱（不使用Regex），只是檢驗輸入的內容符合Email的正確形式，無法確認是否存在。function validEmail(email){//驗證是否存在空格，斜杠，冒號，都好分號等無效字元var invalidChars=" /:,;";if (email==""){return false;};for (var k=0;k<invalidChars.length;k++){var badChar=invalidChars.charAt(k);if(email.indexOf(badChar)>-1){return false;};};//驗證是否存在@var atPos=email.indexOf("@",1);if(atPos==-1){return false;};//驗證@是否重複存在if(email.indexOf("@",atPos+1)!=-1){return false;};//驗證是否存在點var periodPos=email.indexOf(".",atPos);if(periodPos==-1){return false;};//驗證點號後是否至少有兩個字元if(periodPos+3>email.length){return false;};return true;};//用Regex檢驗電子郵件地址（推薦使用）function isEmail(email){var reEmail=/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;return reEmail.test(email);};//用Regex檢驗檔案尾碼是否為gif或jpgfunction isImg(newURL){var reImg=/^(file|http):\/\/\S+\/\S+\.(gif|jpg)$/i;return reImg.test(newURL);};    //驗證郵遞區號function isPostcode(postcode){var rePostcode=/^[0-9]{6}$/;return rePostcode.test(postcode);}//可以在這裡繼續擴充驗證內容，例如//驗證有線電話號碼//驗證手機};};//根據使用者做出的選擇自動化佈建欄位輸入function spaceSet(){if(this.checked){document.getElementById("Space2").checked=true;}else{document.getElementById("Space2").checked=false;};};

注釋，我盡量寫得詳細些，大家應該能看明白。

可複用:

基本上囊括了表單上最常用的幾個控制項的驗證方法.

可擴充,方法:

只要在這個位置

加入你需要驗證的標籤的class屬性,

 然後在這裡,

添加你的驗證方法即可.

Html文檔：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>無標題文檔</title>    <script type="text/javascript" src="ValidForm1.js"></script>    <link rel="stylesheet" type="text/css" href="ValidForm.css"></head><body><h2 >Valid Form</h2><form action="#"><p><label for="emailAddr">Email Address:    <input id="emailAddr" type="text" size="30" class="reqd isEmail" />        </label></p>            <p><label for="color">Colors:    <select id="color" class="reqd">        <option value="" selected="selected">Choose a color</option>        <option value="Red">Red</option>         <option value="Green">Green</option>          <option value="Blue">Blue</option>          </select>         </label></p>    <p>Options:    <label for="NormalUser"><input type="checkbox" id="NormalUser" value="Yes" />NormalUser(2G only)  </label>         <label for="AdvancedUser"><input type="checkbox" id="AdvancedUser" value="Yes" />AdvancedUser</label></p>     <p><label for="Space">Space:     <input type="radio" id="Space2" name="Space" value="2G" class="radio" />2G       <input type="radio" id="Space4" name="Space" value="4G" class="radio" />4G     </label></p>           <p><label for="address">Enter your Address or pick the Address<br />Address: <input type="text" id="address" size="30" maxlength="30" class="isAddress addressList"/>       <select id="addressList" size="4" class="address">     <option value="cangzhou">Cangzhou</option>        <option value="langfang">Langfang</option>        <option value="handan">Handan</option>        <option value="baoding">Baoding</option>        <option value="zhangjiakou">Zhangjiakou</option>      </select>     </label></p>     <p><label for="postcode">Postcode: <input id="postcode" type="text" size="6" maxlength="6" class="isPostcode" /></label></p>           <p><label for="image">Image URL:<input id="image" type="text" size="30" maxlength="30" class="isImage" /></label></p>            <p><input type="submit" value="Submit" /> <input type="reset" value="Reset" /></p></form></body></html>

CSS樣式表（ValidForm.css）：

@charset "utf-8";/* CSS Document */body{color:#000;background-color:#FFF;}input.invalid{/*當輸入無效時，使用該樣式*/background-color:#FF9;border:2px red inset;}label.invalid{/*當輸入無效時，使用該樣式*/color:#F00;}

歡迎拍磚！

會把改進放到版本2.0裡！