以前在开发项目的时候,在没使用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 }
宠辱不惊,看庭前花开花落;去留无意,望天上云卷云舒