用正则表达式和javascript对表单进行全面验证

 

1. 代码：<!--
2. 使用时请将下面的javascript代码存到一个单一的js文件中。
3. 1、表单要求
4.  <form name="formname" onSubmit="return validateForm(this)"></form>
5.  将对表单中的所有以下类型的域依次验证，所有验证是去除了前导和后缀空格的，要注意是区分大小写的。
6. 2、空值验证
7.  表单中任意域加上emptyInfo属性将对此域是否为空进行验证（可以和最大长度验证/一般验证方式同时使用）。
8.  无此属性视为此域允许空值。
9. 　　如：<input type="text" name="fieldNamename" emptyInfo="字段不能为空！">
10. 3、最大长度验证（可以和空值验证、一般验证方式同时使用）：
11.  <input type="text" name="fieldNamename" maxlength="20" lengthInfo="最大长度不能超过20！">
12.  或,<textarea maxlength="2000" lengthInfo="最大长度不能超过2000！">
13. 3、一般验证方式(不对空值做验证）:
14. 　　如：<input type="text" validator="^(19|20)[0-9]{2}$" errorInfo="不正确的年份!" >
15. 4、标准验证(不与其它验证方式同时使用）：
16.  全部通过<input type="hidden">来实现，并且不需要name属性以免提交到服务器。
17. 　　4.1、合法日期验证：
18.   <input type="text" name="yearfieldName" value="2004">注：这里也可以是<select name="yearfieldName"></select>，以下同
19.   <input type="text" name="monthfieldName" value="02">
20.   <input type="text" name="dayfieldName" value="03">
21.   <input type="hidden" validatorType="DateGroup" year="yearfieldName" month="monthfieldName" day="dayfieldName" errorInfo="不正确的日期!">
22.   yearfieldName、monthfieldName、dayfieldName分别为年月日字段，月和日可以是两位(MM)或一位格式(M)，
23.   此处不对每个字段分别检验(如果要检验，请在年月日三个域分别使用前面的一般验证方式），只对日期的最大值是否合法检查;
24.  4.2、日期格式验证(请注意，此验证不对日期是否有效进行验证，还未找到从格式中得到年月日数据的方法^_^)：
25.   <input type="text" name="datefieldName" value="2003-01-03 21:31:00">
26.   <input type="hidden" validatorType="Date" fieldName="datefieldName"; format="yyyy-MM-dd HH:mm:ss" errorInfo="不正确的日期!">
27.   其中格式仅对y、M、d、H、m、s进行支持(其它字符视为非时间的字符)
28.  4.3、列表验证：
29.   检验列表(checkbox、redio、select)是否至少选中了一条记录(对select主要用于多项选择)
30.   <input type="checkbox" name="checkbox1">
31.   <input type="hidden" validatorType="Checkbox" fieldName="checkbox1" errorInfo="请至少选中一条记录!">
32.   其中validatorType可以是Checkbox、R、Select;
33.   对于一个select表单，如果要求选择一条不能是第一条的记录，请用下列方式:
34.   <select name="select1" emptyInfo="请选择一个选项!">
35.   <option value="">==请选择==</option>
36.   <option value="1">1</option>
37.   <select>
38.  4.4、Email验证：
39.   <input type="text" name="email">
40.   <input type="hidden" fieldName="email" validatorType="Email" separator="," errorInfo="不正确的Email!">
41.   其中separator为可选项，表示输入多个email时的分隔符(无此选项只能是一个地址）
42.  4.5、加入其它javascript操作：
43.  <script type="text/javascript">
44.   function functionname(){
45.     自定义方法
46.   }
47.  </script>
48.  表单中加入<input type="hidden" validatorType="javascript" functionName="functionname">（此时emptyInfo等属性无效）
49.   时将调用function属性中指定的javascript方法（要求方法返回true或false，返回false将不再验证表单，也不提交表单)。
50. 5、在表单通过验证提交前disable一个按钮（也可将其它域disable,不能与其它验证同在一个域)，不要求按钮是表单中的最后一个
51.  <input type="button" name="提交" validatorType="disable">
52. 6、不验证表单
53. 　　<input type="hidden" name="validate" value="0" functionName="functionname">
54.  当validator域值为0时不对表单进行验证，直接提交表单或执行指定function并返回true后提交表单
55.  functionName为可选
57. -->
58. <script type="text/javascript">
59. function getStringLength(str){
60.   var endvalue=0;
61.   var sourcestr=new String(str);
62.   var tempstr;
63.   for (var strposition = 0; strposition < sourcestr.length; strposition ++) {
64.     tempstr=sourcestr.charAt(strposition);
65.     if (tempstr.charCodeAt(0)>255 || tempstr.charCodeAt(0)<0) {
66.       endvalue=endvalue+2;
67.     } else {
68.       endvalue=endvalue+1;
69.     }
70.   }
71.   return(endvalue);
72. }
73. function trim(str){
74.   if(str==null) return "";
75.   if(str.length==0) return "";
76.   var i=0,j=str.length-1,c;
77.   for(;i<str.length;i++){
78.     c=str.charAt(i);
79.     if(c!=' ') break;
80.   }
81.   for(;j>-1;j--){
82.     c=str.charAt(j);
83.     if(c!=' ') break;
84.   }
85.   if(i>j) return "";
86.   return str.substring(i,j+1); 
87. }
88. function validateDate(date,format,alt){
89.   var time=trim(date.value);
90.   if(time=="") return;
91.   var reg=format;
92.   var reg=reg.replace(/yyyy/,"[0-9]{4}");
93.   var reg=reg.replace(/yy/,"[0-9]{2}");
94.   var reg=reg.replace(/MM/,"((0[1-9])|1[0-2])");
95.   var reg=reg.replace(/M/,"(([1-9])|1[0-2])");
96.   var reg=reg.replace(/dd/,"((0[1-9])|([1-2][0-9])|30|31)");
97.   var reg=reg.replace(/d/,"([1-9]|[1-2][0-9]|30|31))");
98.   var reg=reg.replace(/HH/,"(([0-1][0-9])|20|21|22|23)");
99.   var reg=reg.replace(/H/,"([0-9]|1[0-9]|20|21|22|23)");
100.   var reg=reg.replace(/mm/,"([0-5][0-9])");
101.   var reg=reg.replace(/m/,"([0-9]|([1-5][0-9]))");
102.   var reg=reg.replace(/ss/,"([0-5][0-9])");
103.   var reg=reg.replace(/s/,"([0-9]|([1-5][0-9]))");
104.   reg=new RegExp("^"+reg+"$");
105.   if(reg.test(time)==false){//验证格式是否合法
106.     alert(alt);
107.     date.focus();
108.     return false;
109.   }
110.   return true;
111. }
112. function validateDateGroup(year,month,day,alt){
113.   var array=new Array(31,28,31,30,31,30,31,31,30,31,30,31);
114.   var y=parseInt(year.value);
115.   var m=parseInt(month.value);
116.   var d=parseInt(day.value);
117.   var maxday=array[m-1];
118.   if(m==2){
119.     if((y%4==0&&y%100!=0)||y%400==0){
120.       maxday=29;
121.     }
122.   }
123.   if(d>maxday){
124.     alert(alt);
125.     return false;
126.   }
127.   return true;
128. }
129. function validateCheckbox(obj,alt){
130.   var rs=false;
131.   if(obj!=null){
132.     if(obj.length==null){
133.       return obj.checked;
134.     }
135.     for(i=0;i<obj.length;i++){
136.       if(obj[i].checked==true){
137.         return true;
138.       }
139.     }
140.   }
141.   alert(alt);
142.   return rs;
143. }
144. function validateRadio(obj,alt){
145.   var rs=false;
146.   if(obj!=null){
147.     if(obj.length==null){
148.       return obj.checked;
149.     }
150.     for(i=0;i<obj.length;i++){
151.       if(obj[i].checked==true){
152.         return true;
153.       }
154.     }
155.   }
156.   alert(alt);
157.   return rs;
158. }
159. function validateSelect(obj,alt){
160.   var rs=false;
161.   if(obj!=null){
162.     for(i=0;i<obj.options.length;i++){
163.       if(obj.options[i].selected==true){
164.         return true;
165.       }
166.     }
167.   }
168.   alert(alt);
169.   return rs;
170. }
171. function validateEmail(email,alt,separator){
172.   var mail=trim(email.value);
173.   if(mail=="") return;
174.   var em;
175.   var myReg = /^[_a-z0-9]+@([_a-z0-9]+/.)+[a-z0-9]{2,3}$/;
176.   if(separator==null){
177.     if(myReg.test(email.value)==false){
178.       alert(alt);
179.       email.focus();
180.       return false;
181.     }
182.   }
183.   else{
184.     em=email.value.split(separator);
185.     for(i=0;i<em.length;i++){
186.       em[i]=em[i].trim();
187.       if(em[i].length>0&&myReg.test(em[i])==false){
188.         alert(alt);
189.         email.focus();
190.         return false;
191.       }
192.     }
193.   }
194.   return true;
195. }
196. function validateForm(theForm){// 若验证通过则返回true
197.   var disableList=new Array();
198.   var field = theForm.elements; // 将表单中的所有元素放入数组
199.   for(var i = 0; i < field.length; i++){
200.     var vali=theForm.validate;
201.  if(vali!=null){
202.    if(vali.value=="0"){
203.      var fun=vali.functionName;
204.   if(fun!=null){
205.     return eval(fun+"()");
206.   }
207.   else{
208.     return true;
209.   }
210.    }
211.  }
213.     var empty=false;
214.     var value=trim(field[i].value);
215.     if(value.length==0){//是否空值
216.       empty=true;
217.     }
218.     var emptyInfo=field[i].emptyInfo;//空值验证
219.     if(emptyInfo!=null&&empty==true){
220.       alert(emptyInfo);
221.       field[i].focus();
222.       return false;
223.     }
224.     var lengthInfo=field[i].lengthInfo;//最大长度验证
225.     if(lengthInfo!=null&&getStringLength(value)>field[i].maxLength){
226.       alert(lengthInfo);
227.       field[i].focus();
228.       return false;
229.     }
231.     var validatorType=field[i].validatorType;
232.     if(validatorType!=null){//其它javascript
233.       var rs=true;
234.       if(validatorType=="javascript"){
235.         eval("rs="+field[i].functionName+"()");
236.         if(rs==false){
237.           return false;
238.         }
239.         else{
240.           continue;
241.         }
242.       }
243.       else if(validatorType=="disable"){//提交表单前disable的按钮
244.         disableList.length++;
245.         disableList[disableList.length-1]=field[i];
246.         continue;
247.       }
248.       else if(validatorType=="Date"){
249.         rs=validateDate(theForm.elements(field[i].fieldName),field[i].format,field[i].errorInfo);
250.       }
251.       else if(validatorType=="DateGroup"){
252.         rs=validateDateGroup(theForm.elements(field[i].year),theForm.elements(field[i].month),theForm.elements(field[i].day),field[i].errorInfo);
253.       }
254.       else if(validatorType=="Checkbox"){
255.         rs=validateCheckbox(theForm.elements(field[i].fieldName),field[i].errorInfo);
256.       }
257.       else if(validatorType=="Radio"){
258.         rs=validateRadio(theForm.elements(field[i].fieldName),field[i].errorInfo);
259.       }
260.       else if(validatorType=="Select"){
261.         rs=validateSelect(theForm.elements(field[i].fieldName),field[i].errorInfo);
262.       }
263.       else if(validatorType=="Email"){
264.         rs=validateEmail(theForm.elements(field[i].fieldName),field[i].errorInfo);
265.       }
266.       else{
267.         alert("验证类型不被支持, fieldName: "+field[i].name);
268.         return false;
269.       }
270.       if(rs==false){
271.         return false;
272.       }
273.     }
274.     else{//一般验证
275.       if(empty==false){
276.         var v = field[i].validator; // 获取其validator属性
277.         if(!v) continue;            // 如果该属性不存在,忽略当前元素
278.         var reg=new RegExp(v);
279.         if(reg.test(field[i].value)==false){
280.           alert(field[i].errorInfo);
281.           field[i].focus();
282.           return false;
283.         }
284.       }
285.     }
286.   }
287.   for(i=0;i<disableList.length;i++){
288.     disableList[i].disabled=true;
289.   }
290.   return true;
291. }
292. </script>