通用表單驗證函數 - FormCheck JavaScript Function

以前在開發項目的時候，在沒使用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" /> //在首個标簽上注明即可

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">

</select>

//該下拉框為必選項，但隻想選擇其中的“市”，是以為“省”增加屬性：skip=true，即使選擇該項，也做無效處理。

6、title

控件名稱描述

對于單選框和複選框來說，僅在第一個标簽上設定該屬性即可，其他同名的一組内的标簽将預設繼承第一個标簽的設定。

1 /**

2 * @fileoverview 表單驗證相關函數

3 * JavaScript.

4 *

5 * @author 網無忌 [email protected]

6 * @version 1.0

7 */

9 /**

10 * 驗證表單輸入規則（自定義）

11 * @type boolean

12 * @returns 驗證結果 true/false

13 */

14 var formChkDefaultMatch = {enNull:true,len:'0,2000',match:'',tempList:[]}

16 //--- 設定驗證模版結束 --------------

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) == "undefined") return 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) > -1) continue;

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 }

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+'”的輸入格式不符合要求！\t\n\t\n'+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 < 1) return {desc:'“'+tmpDesc+'”的候選項為空！',value:false}

93 if(prmObj.options[prmObj.options.selectedIndex].skip == "true") return {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 }

寵辱不驚，看庭前花開花落；去留無意，望天上雲卷雲舒

通用表單驗證函數 - FormCheck JavaScript Function

繼續閱讀

Windows下VS開發環境環境安裝工程項目設定關于Debug和Release的提示

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

Windows下配置Apache的SSL服務

Mac｜Windows系統本地照片自動上傳到伺服器

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條