以前在开发项目的时候,在没使用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+'”的输入格式不符合要求!\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 }
宠辱不惊,看庭前花开花落;去留无意,望天上云卷云舒