您好,欢迎访问一九零五行业门户网

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

使用时请将下面的javascript代码存到一个单一的js文件中。
1、表单要求
<form name="formname" onsubmit="return validateform(this)"></form>
将对表单中的所有以下类型的域依次验证,所有验证是去除了前导和后缀空格的,要注意是区分大小写的。
2、空值验证
表单中任意域加上emptyinfo属性将对此域是否为空进行验证(可以和最大长度验证\一般验证方式同时使用)。
无此属性视为此域允许空值。
如:<input type="text" name="fieldnamename" emptyinfo="字段不能为空!">
3、最大长度验证(可以和空值验证、一般验证方式同时使用):
<input type="text" name="fieldnamename" maxlength="20" lengthinfo="最大长度不能超过20!">
或,<textarea maxlength="2000" lengthinfo="最大长度不能超过2000!">
3、一般验证方式(不对空值做验证):
如:<input type="text" validator="^(19|20)[0-9]{2}$" errorinfo="不正确的年份!" >
4、标准验证(不与其它验证方式同时使用):
全部通过<input type="hidden">来实现,并且不需要name属性以免提交到服务器。
4.1、合法日期验证:
<input type="text" name="yearfieldname" value="2004">注:这里也可以是<select name="yearfieldname"></select>,以下同 <input type="text" name="monthfieldname" value="02"> <input type="text" name="dayfieldname" value="03"> <input type="hidden" validatortype="dategroup" year="yearfieldname" month="monthfieldname" day="dayfieldname" errorinfo="不正确的日期!">
yearfieldname、monthfieldname、dayfieldname分别为年月日字段,月和日可以是两位(mm)或一位格式(m),
此处不对每个字段分别检验(如果要检验,请在年月日三个域分别使用前面的一般验证方式),只对日期的最大值是否合法检查;
4.2、日期格式验证(请注意,此验证不对日期是否有效进行验证,还未找到从格式中得到年月日数据的方法^_^):
<input type="text" name="datefieldname" value="2003-01-03 21:31:00"> <input type="hidden" validatortype="date" fieldname="datefieldname"; format="yyyy-mm-dd hh:mm:ss" errorinfo="不正确的日期!">
其中格式仅对y、m、d、h、m、s进行支持(其它字符视为非时间的字符)
4.3、列表验证:
检验列表(checkbox、redio、select)是否至少选中了一条记录(对select主要用于多项选择)
<input type="checkbox" name="checkbox1"> <input type="hidden" validatortype="checkbox" fieldname="checkbox1" errorinfo="请至少选中一条记录!">
其中validatortype可以是checkbox、r、select;
对于一个select表单,如果要求选择一条不能是第一条的记录,请用下列方式:
<select name="select1" emptyinfo="请选择一个选项!"> <option value="">==请选择==</option> <option value="1">1</option> <select>
4.4、email验证:
<input type="text" name="email"> <input type="hidden" fieldname="email" validatortype="email" separator="," errorinfo="不正确的email!">
其中separator为可选项,表示输入多个email时的分隔符(无此选项只能是一个地址)
4.5、加入其它javascript操作:
<script type="text/javascript"> function functionname(){ 自定义方法 } </script> 表单中加入<input type="hidden" validatortype="javascript" functionname="functionname">(此时emptyinfo等属性无效) 时将调用function属性中指定的javascript方法(要求方法返回true或false,返回false将不再验证表单,也不提交表单)。 5、在表单通过验证提交前disable一个按钮(也可将其它域disable,不能与其它验证同在一个域),不要求按钮是表单中的最后一个 <input type="button" name="提交" validatortype="disable"> 6、不验证表单 <input type="hidden" name="validate" value="0" functionname="functionname"> 当validator域值为0时不对表单进行验证,直接提交表单或执行指定function并返回true后提交表单 functionname为可选 --> <script type="text/javascript"> function getstringlength(str){ var endvalue=0; var sourcestr=new string(str); var tempstr; for (var strposition = 0; strposition < sourcestr.length; strposition ++) { tempstr=sourcestr.charat(strposition); if (tempstr.charcodeat(0)>255 || tempstr.charcodeat(0)<0) { endvalue=endvalue+2; } else { endvalue=endvalue+1; } } return(endvalue); } function trim(str){ if(str==null) return ""; if(str.length==0) return ""; var i=0,j=str.length-1,c; for(;i<str.length;i++){ c=str.charat(i); if(c!=' ') break; } for(;j>-1;j--){ c=str.charat(j); if(c!=' ') break; } if(i>j) return ""; return str.substring(i,j+1); } function validatedate(date,format,alt){ var time=trim(date.value); if(time=="") return; var reg=format; var reg=reg.replace(/yyyy/,"[0-9]{4}"); var reg=reg.replace(/yy/,"[0-9]{2}"); var reg=reg.replace(/mm/,"((0[1-9])|1[0-2])"); var reg=reg.replace(/m/,"(([1-9])|1[0-2])"); var reg=reg.replace(/dd/,"((0[1-9])|([1-2][0-9])|30|31)"); var reg=reg.replace(/d/,"([1-9]|[1-2][0-9]|30|31))"); var reg=reg.replace(/hh/,"(([0-1][0-9])|20|21|22|23)"); var reg=reg.replace(/h/,"([0-9]|1[0-9]|20|21|22|23)"); var reg=reg.replace(/mm/,"([0-5][0-9])"); var reg=reg.replace(/m/,"([0-9]|([1-5][0-9]))"); var reg=reg.replace(/ss/,"([0-5][0-9])"); var reg=reg.replace(/s/,"([0-9]|([1-5][0-9]))"); reg=new regexp("^"+reg+"$"); if(reg.test(time)==false){//验证格式是否合法 alert(alt); date.focus(); return false; } return true; } function validatedategroup(year,month,day,alt){ var array=new array(31,28,31,30,31,30,31,31,30,31,30,31); var y=parseint(year.value); var m=parseint(month.value); var d=parseint(day.value); var maxday=array[m-1]; if(m==2){ if((y%4==0&&y%100!=0)||y%400==0){ maxday=29; } } if(d>maxday){ alert(alt); return false; } return true; } function validatecheckbox(obj,alt){ var rs=false; if(obj!=null){ if(obj.length==null){ return obj.checked; } for(i=0;i<obj.length;i++){ if(obj[i].checked==true){ return true; } } } alert(alt); return rs; } function validateradio(obj,alt){ var rs=false; if(obj!=null){ if(obj.length==null){ return obj.checked; } for(i=0;i<obj.length;i++){ if(obj[i].checked==true){ return true; } } } alert(alt); return rs; } function validateselect(obj,alt){ var rs=false; if(obj!=null){ for(i=0;i<obj.options.length;i++){ if(obj.options[i].selected==true){ return true; } } } alert(alt); return rs; } function validateemail(email,alt,separator){ var mail=trim(email.value); if(mail=="") return; var em; var myreg = /^[_a-z0-9]+@([_a-z0-9]+\.)+[a-z0-9]{2,3}$/; if(separator==null){ if(myreg.test(email.value)==false){ alert(alt); email.focus(); return false; } } else{ em=email.value.split(separator); for(i=0;i<em.length;i++){ em[i]=em[i].trim(); if(em[i].length>0&&myreg.test(em[i])==false){ alert(alt); email.focus(); return false; } } } return true; } function validateform(theform){// 若验证通过则返回true var disablelist=new array(); var field = theform.elements; // 将表单中的所有元素放入数组 for(var i = 0; i < field.length; i++){ var vali=theform.validate; if(vali!=null){ if(vali.value=="0"){ var fun=vali.functionname; if(fun!=null){ return eval(fun+"()"); } else{ return true; } } } var empty=false; var value=trim(field[i].value); if(value.length==0){//是否空值 empty=true; } var emptyinfo=field[i].emptyinfo;//空值验证 if(emptyinfo!=null&&empty==true){ alert(emptyinfo); field[i].focus(); return false; } var lengthinfo=field[i].lengthinfo;//最大长度验证 if(lengthinfo!=null&&getstringlength(value)>field[i].maxlength){ alert(lengthinfo); field[i].focus(); return false; } var validatortype=field[i].validatortype; if(validatortype!=null){//其它javascript var rs=true; if(validatortype=="javascript"){ eval("rs="+field[i].functionname+"()"); if(rs==false){ return false; } else{ continue; } } else if(validatortype=="disable"){//提交表单前disable的按钮 disablelist.length++; disablelist[disablelist.length-1]=field[i]; continue; } else if(validatortype=="date"){ rs=validatedate(theform.elements(field[i].fieldname),field[i].format,field[i].errorinfo); } else if(validatortype=="dategroup"){ rs=validatedategroup(theform.elements(field[i].year),theform.elements(field[i].month),theform.elements(field[i].day),field[i].errorinfo); } else if(validatortype=="checkbox"){ rs=validatecheckbox(theform.elements(field[i].fieldname),field[i].errorinfo); } else if(validatortype=="radio"){ rs=validateradio(theform.elements(field[i].fieldname),field[i].errorinfo); } else if(validatortype=="select"){ rs=validateselect(theform.elements(field[i].fieldname),field[i].errorinfo); } else if(validatortype=="email"){ rs=validateemail(theform.elements(field[i].fieldname),field[i].errorinfo); } else{ alert("验证类型不被支持, fieldname: "+field[i].name); return false; } if(rs==false){ return false; } } else{//一般验证 if(empty==false){ var v = field[i].validator; // 获取其validator属性 if(!v) continue; // 如果该属性不存在,忽略当前元素 var reg=new regexp(v); if(reg.test(field[i].value)==false){ alert(field[i].errorinfo); field[i].focus(); return false; } } } } for(i=0;i<disablelist.length;i++){ disablelist[i].disabled=true; } return true; } </script>
其它类似信息

推荐信息