您的位置:首页技术文章
文章详情页

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

浏览:4日期:2023-06-25 14:16:21

使用时请将下面的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){// 若验证通过则返回truevar 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){//其它javascriptvar 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>

标签: JavaScript
相关文章: