validator验证控件使用代码 |
|
本文标签：validator,验证控件 下面是js代码（在绑定对象的时候感觉很不优雅，希望高人能指点一二啊！） 复制代码 代码如下: 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; self.input=obj; self.options=option; self.tip=document.getElementById(self.options.tips); self.text=self.tip.innerHTML; self.init(obj); } validator.prototype.init=function(o){ var self=this; addEvent(o,focus,function(){ self.focus(); }); addEvent(o,blur,function(){ self.valid(); }); } validator.prototype.valid=function(){ var self=this; var reg=self.options.reg||self.type; if(new RegExp(reg).test(self.input.value.replace(/\s/ig,))){ self.tip.className=validator_oncorrect; self.tip.innerHTML=输入正确; self.tag=1; }else{ self.tip.className=validator_onerror; self.tip.innerHTML=对不起，您输入的内容不符合规则！; self.tag=0; } } validator.prototype.focus=function(){ this.tip.className=validator_onfocus; this.tip.innerHTML=this.text; } 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}); arr[1]=validator(inputs[1],{type:url,tips:m2}); arr[2]=validator(inputs[2],{type:email,tips:m3}); arr[3]=validator(inputs[3],{type:mobile,tips:m4}); arr[4]=validator(inputs[4],{type:integer,tips:m5,reg:^-?\\d*$}); function submitForm(){//提交表单过滤 var l=arr.length; for(var i in arr){ if(arr[i].tag==1) l--; else if(arr[i].tag==2){ arr[i].valid(); } } if(l!=0)return false; } 以下是页面demo，可能缺少一个小图标，汗，不知道怎么发可执行的代码 。 复制代码 代码如下: <!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("../images/validator.gif") no-repeat scroll 4px 4px transparent;border:1px solid #3196C4;color:#666666;line-height:20px;padding-left:25px;} .validator_onerror {background:url("../images/validator.gif") no-repeat scroll 4px -596px #FFF2E9;border:1px solid #FF6600;color:#666666;line-height:20px;padding-left:25px;} .validator_oncorrect {background:url("../images/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("../images/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" class="validator_onshow">邮政编码只能为6位数字，有助于更快邮寄或快递 。</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" class="validator_onshow">请正确输入url地址</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" class="validator_onshow">请输入正确的E-mail格式，并带有@符号，不区分大小写 。</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" class="validator_onshow">手机号码只能为11位数字 。</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" class="validator_onshow">请正确输入整数</div></div> </div> <div class="clear"></div> <input type="submit" value="保存" onclick="return submitForm()"/> </form> </div> </body> <script type="text/javascript" src="style/js/validator.js"></script> </html> |
