通用表单验证函数

  1<form onsubmit="return CheckForm(this)">
  2
  3写到这里,整体框架就出来了,通过取得表单元素的check属性,取得字符串,构建正则表达式.再验证其值.如果通过验证就提交,如是数据不合法则取得表单元素的warning属性,产生提示信息.并返回到该表单元素.整个的框架也比较简单.   
  4我们要做的就是写好正则表达式! 
  5
  6接下来我们来分析一下所有的表单元素   
  7按其共性,我们将它们分为三类   
  8每类表单的特点不一样,我们的目标就是写出通用的. 
  9
 101.文输入框Text   
 11<input name="txt" type="text"/>
 12<input name="pwd" type="password"/>
 13<input name="hid" type="hidden"/>
 14<input name="myfile" type="file"/>
 15<textarea name="txts"></textarea>   
 162.单多选框Choose   
 17<input name="c" type="checkbox"/>
 18<input name="c" type="checkbox"/>
 19<input name="r" type="radio"/>
 20<input name="r" type="radio"/>   
 213.单多下拉菜单Select   
 22<select name="sel"></select>
 23<select multiple="" name="sels"></select>
 24
 25  
 26讲了一堆"大道理"太抽象了,代码更有说服力!   
 27
 28
 29<script language="JavaScript">   
 30<!--   
 31////////////////////////////////////////////////////////////////////////////////   
 32/*   
 33*--------------- 客户端表单通用验证CheckForm(oForm) -----------------   
 34* 功能:通用验证所有的表单元素.   
 35* 使用:   
 36* <form name="form1" onsubmit="return CheckForm(this)">   
 37* <input type="text" name="id" check="^\S+$" warning="id不能为空,且不能含有空格">   
 38* <input type="submit">   
 39* </form>   
 40* 注意:写正则表达式时一定要小心.不要让"有心人"有空子钻.   
 41* 已实现功能:   
 42* 对text,password,hidden,file,textarea,select,radio,checkbox进行合法性验证   
 43* 待实现功能:把正则表式写成个库.   
 44*--------------- 客户端表单通用验证CheckForm(oForm) -----------------   
 45*/   
 46//////////////////////////////////////////////////////////////////////////////// 
 47
 48//主函数   
 49function CheckForm(oForm)   
 50{   
 51var els = oForm.elements;   
 52//遍历所有表元素   
 53for(var i=0;i<els.length;i++)   
 54{   
 55//是否需要验证   
 56if(els[i].check)   
 57{   
 58//取得验证的正则字符串   
 59var sReg = els[i].check;   
 60//取得表单的值,用通用取值函数   
 61var sVal = GetValue(els[i]);   
 62//字符串->正则表达式,不区分大小写   
 63var reg = new RegExp(sReg,"i");   
 64if(!reg.test(sVal))   
 65{   
 66//验证不通过,弹出提示warning   
 67alert(els[i].warning);   
 68//该表单元素取得焦点,用通用返回函数   
 69GoBack(els[i])   
 70return false;   
 71}   
 72}   
 73}   
 74} 
 75
 76//通用取值函数分三类进行取值   
 77//文本输入框,直接取值el.value   
 78//单多选,遍历所有选项取得被选中的个数返回结果"00"表示选中两个   
 79//单多下拉菜单,遍历所有选项取得被选中的个数返回结果"0"表示选中一个   
 80function GetValue(el)   
 81{   
 82//取得表单元素的类型   
 83var sType = el.type;   
 84switch(sType)   
 85{   
 86case "text":   
 87case "hidden":   
 88case "password":   
 89case "file":   
 90case "textarea": return el.value;   
 91case "checkbox":   
 92case "radio": return GetValueChoose(el);   
 93case "select-one":   
 94case "select-multiple": return GetValueSel(el);   
 95}   
 96//取得radio,checkbox的选中数,用"0"来表示选中的个数,我们写正则的时候就可以通过0{1,}来表示选中个数   
 97function GetValueChoose(el)   
 98{   
 99var sValue = "";   
100//取得第一个元素的name,搜索这个元素组   
101var tmpels = document.getElementsByName(el.name);   
102for(var i=0;i<tmpels.length;i++)   
103{   
104if(tmpels[i].checked)   
105{   
106sValue += "0";   
107}   
108}   
109return sValue;   
110}   
111//取得select的选中数,用"0"来表示选中的个数,我们写正则的时候就可以通过0{1,}来表示选中个数   
112function GetValueSel(el)   
113{   
114var sValue = "";   
115for(var i=0;i<el.options.length;i++)   
116{   
117//单选下拉框提示选项设置为value=""   
118if(el.options[i].selected && el.options[i].value!="")   
119{   
120sValue += "0";   
121}   
122}   
123return sValue;   
124}   
125} 
126
127//通用返回函数,验证没通过返回的效果.分三类进行取值   
128//文本输入框,光标定位在文本输入框的末尾   
129//单多选,第一选项取得焦点   
130//单多下拉菜单,取得焦点   
131function GoBack(el)   
132{   
133//取得表单元素的类型   
134var sType = el.type;   
135switch(sType)   
136{   
137case "text":   
138case "hidden":   
139case "password":   
140case "file":   
141case "textarea": el.focus();var rng = el.createTextRange(); rng.collapse(false); rng.select();   
142case "checkbox":   
143case "radio": var els = document.getElementsByName(el.name);els[0].focus();   
144case "select-one":   
145case "select-multiple":el.focus();   
146}   
147} 
148
149//-->   
150</script>
151<form name="form1" onsubmit="return CheckForm(this)">   
152test:<input name="test" type="text"/>不验证
153   
154账号:<input check="^\S+$" name="id" type="text" warning="账号不能为空,且不能含有空格"/>不能为空
155   
156密码:<input check="\S{6,}" name="id" type="password" warning="密码六位以上"/>六位以上
157   
158电话:<input check="^\d+$" name="number" type="text" value="" warning="电话号码含有非法字符"/>
159   
160相片上传:<input check="(.*)(\\.jpg|\\.bmp)$" name="pic" type="file" value="1" warning="相片应该为JPG,BMP格式的"/>
161   
162出生日期:<input check="^\d{4}\\-\d{1,2}-\d{1,2}$" name="dt" type="text" value="" warning="日期格式2004-08-10"/>日期格式2004-08-10
163   
164省份:   
165<select check="^0$" name="sel" warning="请选择所在省份">
166<option value="">请选择   
167<option value="1">福建省   
168<option value="2">湖北省   
169</option></option></option></select>   
170
171   
172选择你喜欢的运动:
173   
174游泳<input check="^0{2,}$" name="c" type="checkbox" warning="请选择2项或以上"/>   
175篮球<input name="c" type="checkbox"/>   
176足球<input name="c" type="checkbox"/>   
177排球<input name="c" type="checkbox"/>   
178
179   
180你的学历:   
181大学<input check="^0$" name="r" type="radio" warning="请选择一项学历"/>   
182中学<input name="r" type="radio"/>   
183小学<input name="r" type="radio"/>   
184
185   
186个人介绍:   
187<textarea check="^[\s|\S]{20,}$" name="txts" warning="个人介绍不能为空,且不少于20字"></textarea>20个字以上   
188<input type="submit"/>
189</form></form>