validator验证控件使用代码_表单特效
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了validator验证控件使用代码_表单特效，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4425字，纯文字阅读大概需要7分钟。
内容图文
下面是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，可能缺少一个小图标，汗，不知道怎么发可执行的代码。
代码如下:
验证控件
内容总结
以上是互联网集市为您收集整理的validator验证控件使用代码_表单特效全部内容，希望文章能够帮你解决validator验证控件使用代码_表单特效所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】