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">

　　<head>

　　<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>

　　<div class="right"><div id="m1" class="validator_onshow">邮政编码只能为6位数字，有助于更快邮寄或快递。</div></div>

　　</div>

　　<div class="right"><div id="m2" class="validator_onshow">请正确输入url地址</div></div>

　　</div>

　　<div class="right"><div id="m3" class="validator_onshow">请输入正确的E-mail格式，并带有@符号，不区分大小写。</div></div>

　　</div>

　　<div class="right"><div id="m4" class="validator_onshow">手机号码只能为11位数字。</div></div>

　　</div>

　　<div class="right"><div id="m5" class="validator_onshow">请正确输入整数</div></div>

　　</div>

　　</form>

　　</div>

　　</body>

　　</html>

教程首页更多教程