用正則表達式和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){// 若驗證通過則返回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>
相關文章:
