通用表單驗證函式-FormCheckJavaScriptFunction
以前在開發專案的時候,在沒使用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
控制元件名稱描述
對於單選框和核取方塊來說,僅在第一個標籤上設定該屬性即可,其他同名的一組內的標籤將預設繼承第一個標籤的設定。
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) == “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 }
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 < 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 }
寵辱不驚,看庭前花開花落;去留無意,望天上雲捲雲舒
相關文章
- HTML 互動式表單驗證HTML
- JavaScript 表單及表單驗證JavaScript
- bootstrap表單驗證boot
- javascript表單驗證JavaScript
- Laravel 表單驗證Laravel
- JavaScript 表單驗證JavaScript
- Django表單驗證Django
- jquery 表單驗證jQuery
- Js表單驗證JS
- 開發中遇到的jquery函式應用和表單驗證處理jQuery函式
- ORACLE單行函式與多行函式之六:通用函式示例Oracle函式
- 表單required 必需驗證UI
- 表單資料驗證
- HTML 表單驗證概述HTML
- bootstrapValidator 表單驗證boot
- 表單驗證——筆記筆記
- angularjs表單驗證AngularJS
- JavaScript表單驗證事件JavaScript事件
- ElementUi rules表單驗證UI
- 表單驗證<AngularJs>AngularJS
- Web 表單驗證 javascriptWebJavaScript
- 輸入表單驗證
- js表單驗證和各種資料驗證正規表示式外掛JS
- ORACLE 密碼驗證函式Oracle密碼函式
- 驗證virtual函式的原理函式
- JS函式驗證總結JS函式
- 表單驗證的3個函式ISSET()、empty()、is_numeric()的使用方法函式
- 通用的驗證模組
- Lumen 仿 Laravel 表單驗證Laravel
- 前端表單驗證的目的前端
- 表單驗證教程簡介
- Layui 自定義表單驗證UI
- Numpy 通用函式函式
- vue表單驗證你真的會了嗎?元件之表單驗證(form)validateVue元件ORM
- mssql sqlserver 驗證整型函式分享SQLServer函式
- 自定義密碼驗證函式密碼函式
- iview表單驗證問題 Select驗證必填失敗,以及表單物件巢狀陣列驗證方法View物件巢狀陣列
- webgl內建函式--通用函式Web函式