validator验证
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <meta name="copyright" content="" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <title>验证控件</title> <style> body {padding:0; margin:0; font: 12px/1.5 Tahoma, Helvetica, Arial, sans-serif;} body, h1, h2, h3, h4, h5, h6, hr, p, blockquote,dl, dt, dd, ul, ol, li,pre,form, fieldset, legend, button, input, textarea,th, td {margin: 0;padding: 0;} button, input, select, textarea {font: 12px/1.5 tahoma, arial, simsun, sans-serif;} h1, h2, h3, h4, h5, h6 { font-size: 100%;font-weight:normal; } address, cite, dfn, em, var { font-style: normal; } code, kbd, pre, samp { font-family: courier new, courier, monospace; } small { font-size: 12px; } ul, ol { list-style: none; } sup { vertical-align: text-top; } sub { vertical-align: text-bottom; } legend { color: #000; } fieldset, img { border: 0; } button, input, select, textarea { font-size: 100%; } table { border-collapse: collapse; border-spacing: 0; } .clear {clear:both;} html { overflow:-moz-bars-vertical; } a { text-decoration: none;} a:hover { text-decoration: underline;} .tabs_panel{margin:10px 0 0 20px;} .wrap {clear:left;} .left {height:25px;line-height:25px;width:160px;} .center {height:auto;padding:3px;width:230px;} .right {height:auto;width:350px;} .left, .center, .right {float:left;margin:4px;} input.txt {border:1px solid #CCCCCC;font-size:14px;height:20px;line-height:20px;width:188px;} .validator_onshow {background:url("validator.gif") no-repeat scroll 4px 4px transparent;border:1px solid #3196C4;color:#666666;line-height:20px;padding-left:25px;} .validator_onerror {background:url("validator.gif") no-repeat scroll 4px -596px #FFF2E9;border:1px solid #FF6600;color:#666666;line-height:20px;padding-left:25px;} .validator_oncorrect {background:url("validator.gif") no-repeat scroll 4px -396px #FFFFFF;border:1px solid #3196C4;font-size:12px;line-height:20px;padding-left:25px;} .validator_onfocus {background:url("validator.gif") no-repeat scroll 4px -196px #E2F3FF;border:1px solid #3196C4;color:#666666;line-height:20px;padding-left:25px;} </style> </head> <body> <h1>验证控件</h1> <div id="example" class="tabs_panel"> <form method="post"> <div class="wrap"> <div class="left">邮编:</div> <div class="center"><input type="text" name="validator" class="txt" /></div> <div class="right"><div id="m1"></div></div> </div> <div class="wrap"> <div class="left">网址:</div> <div class="center"><input type="text" name="validator" class="txt" /></div> <div class="right"><div id="m2"></div></div> </div> <div class="wrap"> <div class="left">邮箱:</div> <div class="center"><input type="text" name="validator" class="txt" /></div> <div class="right"><div id="m3"></div></div> </div> <div class="wrap"> <div class="left">手机:</div> <div class="center"><input type="text" name="validator" class="txt" /></div> <div class="right"><div id="m4"></div></div> </div> <div class="wrap"> <div class="left">整数:</div> <div class="center"><input type="text" name="validator" class="txt"/></div> <div class="right"><div id="m5"></div></div> </div> <div class="wrap"> <div class="left">身份证:</div> <div class="center"><input type="text" name="validator" class="txt"/></div> <div class="right"><div id="m6"></div></div> </div> <div class="clear"></div> <input type="submit" value="保存" onclick="return submitForm()"/> </form> </div> </body> <script type="text/javascript"> function validator(obj,option){//验证对象 var self = this; if(!(self instanceof validator)) return new validator(obj,option); self.source={'mobile':'^(13|14|15|18)[0-9]{9}$','postcode':'^\\d{6}$','integer':'^-?\\d*$','email':'^\\w+((-\\w+)|(\\.\\w+))*\\@[A-Za-z0-9]+((\\.|-)[A-Za-z0-9]+)*\\.[A-Za-z0-9]+$','url':'^http[s]?:\\/\\/([\\w-]+\\.)+[\\w-]+([\\w-./?%&=]*)?$'}; for(var i in self.source){ if(i==option.type) self.type=self.source[i]; } self.tag=2;//控件状态,默认2表示没验证,0表示不通过,1代表通过验证。 self.input=obj; self.options=option; self.text=self.options.focus; self.init(obj); } validator.prototype.init=function(){ var self=this,contain; self.tip=document.createElement('div'); if(typeof self.options.tips=='string'&&document.getElementById(self.options.tips)) contain=document.getElementById(self.options.tips); else if(typeof self.options.tips=='object'&&self.options.tips.nodeType==1) contain=self.options.tips; contain&&contain.appendChild(self.tip); addEvent(self.input,'focus',function(){ self.focus(); }); addEvent(self.input,'blur',function(){ self.valid(); }); if(typeof self.options.show!='undefined'){ self.tip.className='validator_onshow'; self.tip.innerHTML=self.options.show; } if(self.options.trim&&self.input.value.replace(/\s/ig,'')=='')//不用校验可以为空的控件,默认通过 self.tag=1; } validator.prototype.valid=function(){ var self=this; var reg=self.options.reg||self.type; var result=self.input.value; if(result==''){ if(self.options.trim){ self.tip.className='validator_onshow'; self.tag=1; return; }else{ self.tip.className='validator_onerror'; self.tip.innerHTML=typeof(self.options.empty)=='undefined'?'不能为空!':self.options.empty; self.tag=0; return ; } } if(self.options.type == 'identity'){ var checkIdcard=function(idcard){//身份证特别验证 var Errors=["验证通过!","身份证号码位数不对!","身份证号码出生日期超出范围或含有非法字符!","身份证号码校验错误!","身份证地区非法!"]; var area={11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外"}; var idcard,Y,JYM,S,M,idcard_array = [],retflag=false; idcard_array = idcard.split(""); //地区检验 if(area[parseInt(idcard.substr(0,2))]==null)return Errors[4];//身份号码位数及格式检验 switch(idcard.length){ case 15: if((parseInt(idcard.substr(6,2))+1900) % 4 == 0 || ((parseInt(idcard.substr(6,2))+1900)%100 == 0 && (parseInt(idcard.substr(6,2))+1900) % 4 == 0 )){ ereg=/^[1-9][0-9]{5}[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}$/; //测试出生日期的合法性 }else{ ereg=/^[1-9][0-9]{5}[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|1[0-9]|2[0-8]))[0-9]{3}$/;//测试出生日期的合法性 } if(ereg.test(idcard)) return Errors[0]; else return Errors[2]; break; case 18: //18位身份号码检测 //出生日期的合法性检查 //闰年月日:((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9])) //平年月日:((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|1[0-9]|2[0-8])) if(parseInt(idcard.substr(6,4)) % 4 == 0 || (parseInt(idcard.substr(6,4))%100 == 0&&parseInt(idcard.substr(6,4))%4 == 0 )){ ereg=/^[1-9][0-9]{5}19[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}[0-9Xx]$/;//闰年出生日期的合法性正则表达式 }else{ ereg=/^[1-9][0-9]{5}19[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|1[0-9]|2[0-8]))[0-9]{3}[0-9Xx]$/;//平年出生日期的合法性正则表达式 } if(ereg.test(idcard)){//测试出生日期的合法性,计算校验位 S = (parseInt(idcard_array[0]) + parseInt(idcard_array[10])) * 7 + (parseInt(idcard_array[1]) + parseInt(idcard_array[11])) * 9 + (parseInt(idcard_array[2]) + parseInt(idcard_array[12])) * 10 + (parseInt(idcard_array[3]) + parseInt(idcard_array[13])) * 5 + (parseInt(idcard_array[4]) + parseInt(idcard_array[14])) * 8 + (parseInt(idcard_array[5]) + parseInt(idcard_array[15])) * 4 + (parseInt(idcard_array[6]) + parseInt(idcard_array[16])) * 2 + parseInt(idcard_array[7]) * 1 + parseInt(idcard_array[8]) * 6 + parseInt(idcard_array[9]) * 3 ; Y = S % 11; M = "F"; JYM = "10X98765432"; M = JYM.substr(Y,1);//判断校验位 if(M == idcard_array[17]) return Errors[0]; //检测ID的校验位 else return Errors[3]; } else return Errors[2]; break; default: return Errors[1]; break; } } result=result.toUpperCase(); if(checkIdcard(result)=='验证通过!'){ self.tip.className='validator_oncorrect'; self.tip.innerHTML=typeof(self.options.correct)=='undefined'?'输入正确':self.options.correct; self.tag=1; }else{ self.tip.className='validator_onerror'; self.tip.innerHTML=typeof(self.options.error)=='undefined'?checkIdcard(result):self.options.error; self.tag=0; } }else{ if(new RegExp(reg).test(result)){ self.tip.className='validator_oncorrect'; self.tip.innerHTML=typeof(self.options.correct)=='undefined'?'输入正确':self.options.correct; self.tag=1; }else{ self.tip.className='validator_onerror'; self.tip.innerHTML=typeof(self.options.error)=='undefined'?'您输入的内容不符合对应的规则!':self.options.error; self.tag=0; } } } validator.prototype.focus=function(){ this.tip.className='validator_onfocus'; this.tip.innerHTML=this.text; } validator.prototype.remove=function(){ var self=this; self.tip.innerHTML=''; self.tip.parentNode.removeChild(self.tip); self.tag=1; for(var i in self) self[i]=''; self.valid=function(){} self.focus=function(){} self=null; } function addEvent(el,type,fn){ //绑定事件 if(el.attachEvent) { el['e'+type+fn] = fn; //IE下拷贝元素引用,使this指向el对象而不是window el[type+fn] = function(){el['e'+type+fn](window.event);} el.attachEvent('on'+type, el[type+fn]); }else el.addEventListener(type, fn, false); } //页面调用方法 var inputs=document.getElementsByTagName('input');//这里的写法感觉怪怪的,不够优雅,暂时也没找到优化的办法 var arr=[]; arr[0]=validator(inputs[0],{type:'postcode',tips:'m1',focus:'邮政编码只能为6位数字,有助于更快邮寄或快递。'});//第一个参数是绑定的对象,第二个是一个对象如果指定type则调用内部正则验证 arr[1]=validator(inputs[1],{type:'url',tips:'m2',trim:true,focus:'请正确输入url地址'});//trim表示该对象可以为空,默认校验通过 arr[2]=validator(inputs[2],{type:'email',tips:'m3',focus:'请输入正确的E-mail格式,并带有@符号,不区分大小写。'}); arr[3]=validator(inputs[3],{type:'mobile',tips:'m4',focus:'手机号码只能为11位数字。'}); arr[4]=validator(inputs[4],{tips:'m5',reg:'^-?\\d*$',focus:'请正确输入整数'});//也可以自己定义正则,tips是必须指定的用来显示提示信息。 arr[5]=validator(inputs[5],{tips:'m6',type:'identity',focus:'请正确输入身份证号码'}); function submitForm(){//提交表单自动遍历验证 var l=arr.length; for(var i=0;i<arr.length;i++){ if(arr[i].tag==1||arr[i].tag=='') l--; else if(arr[i].tag==2){ arr[i].valid(); if(arr[i].tag==1)l--; } } return l==0; } </script> </html>