下面是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,可能缺少一个小图标,汗,不知道怎么发可执行的代码。
复制代码 代码如下:
验证控件
验证控件
邮编:
邮政编码只能为6位数字,有助于更快邮寄或快递。
网址:
请正确输入url地址
邮箱:
请输入正确的e-mail格式,并带有@符号,不区分大小写。
手机:
手机号码只能为11位数字。
整数:
请正确输入整数