通用表單驗證函式-FormCheckJavaScriptFunction

netwild發表於2010-11-30

以前在開發專案的時候,在沒使用EXTJS之前,寫了這個通用的表單驗證函式。

在實際開發過程中,使用非常簡單,確實大幅提高了開發效率

現在雖然用不到了,但扔了感覺可惜,留在這裡當個紀念吧!

  通用表單驗證函式使用說明 
 
  Author : netwild   最後更新日期:2009-07-02 
 
  一、函式功能 
 
  在編寫WEB應用時,經常需要對各種表單進行輸入驗證,為了節省開發時間,增加開發效率,編寫統一驗證函式。 
 
  二、函式說明 
 
  function chkForm(object form) 
 
  引數form為表單物件,支援兩種方式: 
 
  1、表單物件:<form onsubmit=”return chkForm(this)”> 
 
  2、表單名稱:<form name=”form1″ onsubmit=”return chkForm(`form1`)”> 
 
  返回值:boolean 
 
  三、與驗證相關的屬性 
 
    屬性名稱 屬性型別   說明           預設值   適用控制元件                       
    enNull   擴充套件屬性   是否允許為空       true     input(text、radio、checkbox)、textarea、select 
    len   擴充套件屬性   輸入字元個數範圍     0,2000     input(text)、textarea               
    temp   擴充套件屬性   驗證模版         無       input(text)、textarea               
    match   擴充套件屬性   自定義規則       無       input(text)、textarea               
    skip   擴充套件屬性   跳過驗證         false     input(radio、checkbox)、select           
    title   標準屬性   欄位名稱         無       任何控制元件                       
 
 
  四、屬性說明 
 
  1、enNull 
 
  例如: <input type=”text” name=”inpUname” enNull=”false” title=”使用者名稱” />   //表示該輸入框不允許為空 
 
  <input type=”radio” name=”rdoSex” enNull=”false” title=”性別” />   //表示該組單選框為必選項 
  <input type=”radio” name=”rdoSex”  />   //在首個標籤上註明即可 
 
  <input type=”checkbox” name=”chbDev” enNull=”false” title=”技術” />   //表示該組核取方塊為必選項 
  <input type=”checkbox” name=”chbDev”  />   //在首個標籤上註明即可 
  <input type=”checkbox” name=”chbDev”  /> 
 
  2、len 
 
  例如: <input type=”text” name=”inpUname” len=”6,18″ title=”使用者名稱” />   //表示輸入的字元個數在6到18個之間
  //使用len屬性,可以省略enNull屬性
 
  3、temp 
 
  取值範圍: 
 
  number:匹配數值型,包括整數、負數、小數,並且小數位數不超過6位。 
 
  例如:423、-376、57.89、-0.34 都符合;sds、422.、.237 都不符合 
 
  number5:匹配數值型,包括整數、負數、小數,並且小數位數不超過5位。 
 
  number4:匹配數值型,包括整數、負數、小數,並且小數位數不超過4位。 
 
  number3:匹配數值型,包括整數、負數、小數,並且小數位數不超過3位。 
 
  number2:匹配數值型,包括整數、負數、小數,並且小數位數不超過2位。 
 
  number1:匹配數值型,包括整數、負數、小數,並且小數位數不超過1位。 
 
  number(len1,len2):匹配數值型,包括整數、負數、小數,並且整數部分最長不超過len1,小數部分最長不超過len2 新!
 
  money:匹配貨幣型,包括整數、負數、1位或2位小數 
 
  int:匹配數值型,包括整數、負數,不匹配小數 
 
  uint:匹配無符號數值型,包括正整數,不匹配小數 
 
  var:匹配變數命名規範,可包括:英文字母、數字和下劃線,並且必須以英文字母開頭 
 
  string:匹配字元型,包括任何字元及換行符 
 
  date:匹配標準的10位長度的日期型,例如:2009-06-24 
 
  time:匹配標準的8位長度的時間型,例如:16:51:08 
 
  datetime:匹配19位長度的日期+時間型 
 
  timestep:匹配0-60之間的整數 
 
  weekstep:匹配0-7之間的整數 
 
  monthstep:匹配0-30之間的整數 
 
  exp01:表示式:str=`value` 
 
  input:匹配除英文雙引號、單引號之外的任意字元 
 
  parame:匹配除英文雙引號、單引號、@ # % & * . ? 和空格之外的任意字元 
 
  4、match 
 
  該屬性值為標準的JavaScript正規表示式。但不包括:^(起始符)、$(截止符) 
 
  為統一驗證規則,除非極特殊情況之外,不建議直接使用match屬性進行驗證。 
 
  5、skip 
 
  該屬性表示“跳過驗證”,通常用於單選框、核取方塊及下拉框中,使用了enNull屬性,但其中某些選項需要例外的情況 
 
  例如: <select title=”城市” enNull=”false”> 
  <option skip=”true”>— 遼寧省 —</option> 
  <option>瀋陽</option> 
  <option>遼陽</option> 
  <option>大連</option> 
  <option skip=”true”>— 廣東省 —</option> 
  <option>廣州</option> 
  <option>深圳</option> 
  <option>東莞</option> 
  <option skip=”true”>— 山東省 —</option> 
  <option>濟南</option> 
  <option>青島</option> 
  </select> 
 
  //該下拉框為必選項,但只想選擇其中的“市”,因此為“省”增加屬性:skip=true,即使選擇該項,也做無效處理。
 
  6、title 
 
  控制元件名稱描述 
 
  對於單選框和核取方塊來說,僅在第一個標籤上設定該屬性即可,其他同名的一組內的標籤將預設繼承第一個標籤的設定。

 

 

  1 /**  
  2 * @fileoverview 表單驗證相關函式  
  3 * JavaScript.  
  4 *  
  5 * @author 網無忌 netwild@163.com  
  6 * @version 1.0  
  7 */   
  8   
  9 /**  
 10 * 驗證表單輸入規則(自定義)  
 11 * @type boolean  
 12 * @returns 驗證結果 true/false  
 13 */   
 14 var formChkDefaultMatch = {enNull:true,len:`0,2000`,match:,tempList:[]}   
 15   
 16 //— 設定 驗證模版結束 ————–   
 17   
 18 function arrLook(prmArr,prmSub){var index = 1;for(var i=0;i<prmArr.length;i++){if(prmArr[i]==prmSub){index = i;break;}}return index;}   
 19 function chkForm(prmFormName){   
 20     var frmObj = (typeof(prmFormName) == string)?document.getElementsByName(prmFormName)[0]:prmFormName;   
 21     if(typeof(frmObj) == undefinedreturn false;   
 22     var frmEmts = frmObj.elements;   
 23     var frmEmtsCnt = frmEmts.length;   
 24     var checkObjList = [],arrObjList = [];   
 25     var emtChkRet;   
 26     for(var i=0;i<frmEmtsCnt;i++){   
 27         var emtObj = frmEmts[i];   
 28         var emtObjTagName = emtObj.tagName.toLowerCase();   
 29         if(emtObjTagName == input || emtObjTagName == textarea){   
 30             var emtObjType = (emtObj.type == undefined)?text:emtObj.type;   
 31             if(emtObjType == text){   
 32                 emtChkRet = chkInputText(emtObj);   
 33                 if(!emtChkRet.value){alert(emtChkRet.desc);emtObj.focus();return false}   
 34             }else if(emtObjType == radio || emtObjType == checkbox){   
 35                 if(arrLook(checkObjList,emtObj.name) > 1continue;   
 36                 checkObjList.push(emtObj.name);   
 37                 emtChkRet = chkInputCheck(frmObj,emtObj);   
 38                 if(!emtChkRet.value){alert(emtChkRet.desc);emtObj.focus();return false}   
 39             }   
 40         }else if(emtObjTagName == select){   
 41             emtChkRet = chkSelect(emtObj);   
 42             if(!emtChkRet.value){alert(emtChkRet.desc);emtObj.focus();return false}   
 43         }   
 44     }   
 45     return true;   
 46 }   
 47   
 48 /**  
 49 * 驗證文字框  
 50 */   
 51 function chkInputText(prmObj){   
 52     var tmpValue = prmObj.value;   
 53     var tmpLen = prmObj.value.length;   
 54     var tmpDesc = (prmObj.title == “”)?prmObj.name:prmObj.title;   
 55     var defEnNull = (prmObj.enNull == undefined)?formChkDefaultMatch.enNull:(prmObj.enNull!=false);   
 56     var defLen = (prmObj.len == undefined)?formChkDefaultMatch.len:prmObj.len;    
 57     var defMatch = (prmObj.temp == undefined)?formChkDefaultMatch.match:prmObj.temp;   
 58     var defMatchDesc = “”;   
 59     if(defMatch != “” && /number(d+,d+)/.test(defMatch)){var m=defMatch.match(/number((d+),(d+))/);if(parseInt(m[2])>0){defMatch=(\-)?[\d\,]{1,+m[1]+}(\.(\d){1,+m[2]+})?;defMatchDesc=允許的型別:數值型,並且整數位數最大 +m[1]+ 位,小數位數最大 +m[2]+ 位}else{defMatch=(\-)?[\d\,]{1,+m[1]+};defMatchDesc=允許的型別:整數型,並且整數位數最大 +m[1]+ 位}}   
 60     else if(defMatch != “”){for(var i=0;i<formChkDefaultMatch.tempList.length;i++if(defMatch == formChkDefaultMatch.tempList[i][0]) {defMatch = formChkDefaultMatch.tempList[i][1];defMatchDesc = formChkDefaultMatch.tempList[i][2];break}}   
 61     defMatch = (prmObj.match == undefined)?defMatch:prmObj.match;   
 62     if((!defEnNull) && (tmpValue == “”)) return {desc:``+tmpDesc+`”不允許為空!`,value:false};   
 63     if(tmpLen<defLen.split(,)[0|| tmpLen>defLen.split(,)[1]) return {desc:``+tmpDesc+`”的輸入長度不符合要求[`+defLen+`]!`,value:false};   
 64     if(defMatch != “” && tmpValue != “”)    
 65         try{if(!eval(/^+defMatch+$/).test(tmpValue))return {desc:``+tmpDesc+`”的輸入格式不符合要求!

`+defMatchDesc,value:false}}   
 66         catch(e){return {desc:``+tmpDesc+`”的驗證規則錯誤!`,value:false}}   
 67     return {desc:tmpDesc,value:true};   
 68 }   
 69 /**  
 70 * 驗證單選、複選  
 71 */   
 72 function chkInputCheck(frmObj,prmObj){   
 73     var tmpObjs = frmObj.all[prmObj.name];   
 74     var tmpDesc = (prmObj.title == “”)?prmObj.name:prmObj.title;   
 75     var enNull = (prmObj.enNull == undefined)?formChkDefaultMatch.enNull:(prmObj.enNull!=false);   
 76     var tmpObj,isChecked = false;   
 77     for(var i=0;i<tmpObjs.length;i++){   
 78         tmpObj = tmpObjs[i];   
 79         if((tmpObj.skip != true&& tmpObj.checked) isChecked = true;   
 80         if((!enNull) && isChecked) return {desc:tmpDesc,value:true}   
 81     }   
 82     if(enNull) return {desc:tmpDesc,value:true}   
 83     else return {desc:`請至少選擇“`+tmpDesc+`”其中一個選項!`,value:false}   
 84 }   
 85 /**  
 86 * 驗證下拉框  
 87 */   
 88 function chkSelect(prmObj){   
 89     var tmpDesc = (prmObj.title == “”)?prmObj.name:prmObj.title;   
 90     var enNull = (prmObj.enNull == undefined)?formChkDefaultMatch.enNull:(prmObj.enNull!=false);   
 91     if(enNull) return {desc:tmpDesc,value:true}   
 92     if(prmObj.options.length < 1return {desc:``+tmpDesc+`”的候選項為空!`,value:false}   
 93     if(prmObj.options[prmObj.options.selectedIndex].skip == truereturn {desc:`請至少選擇“`+tmpDesc+`”其中一個選項!`,value:false}   
 94     else return {desc:tmpDesc,value:true}   
 95 }   
 96 /**  
 97 * 驗證日期範圍是否合理  
 98 */   
 99 function chkDateRange(prmDate1,prmDate2){   
100     var pat = /d{4}-d{2}-d{2}/;   
101     if(!pat.test(prmDate1)) return false;   
102     if(!pat.test(prmDate2)) return false;   
103     if(prmDate1 > prmDate2) return false;   
104     return true;   
105 }   
106 /**  
107 * 驗證兩個文字框輸入值是否相同(常用於驗證密碼一致)  
108 */   
109 function chkPassInput(prmPass1,prmPass2){   
110     if(prmPass1 != prmPass2) return false   
111     return true;   
112 }  

 

 


寵辱不驚,看庭前花開花落;去留無意,望天上雲捲雲舒


相關文章