Home > Web Front-end > JS Tutorial > Validator validation control usage code_form effects

Validator validation control usage code_form effects

WBOY
Release: 2016-05-16 18:15:37
Original
1178 people have browsed it

The following is the js code (it feels very inelegant when binding objects, I hope an expert can give me some advice!)

Copy code The code is as follows:

function validator(obj,option){//Validation object
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='Input is correct';
self.tag=1;
}else{
self.tip.className='validator_onerror';
self.tip.innerHTML='Sorry, the content you entered does not comply with the rules! ';
self.tag=0;
}
}
validator.prototype.focus=function(){
this.tip.className='validator_onfocus';
this. tip.innerHTML=this.text;
}
function addEvent(el,type,fn){ //Bind event
if(el.attachEvent) {
el['e' type fn ] = fn; //Copy the element reference under IE so that this points to the el object instead of window
el[type fn] = function(){el['e' type fn](window.event);}
el.attachEvent('on' type, el[type fn]);
}else
el.addEventListener(type, fn, false);
}
//Page call method
var inputs=document.getElementsByTagName('input');//The writing here feels weird and not elegant enough, and I haven't found a way to optimize it yet
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(){//Submit form filtering
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;
}

The following is the page demo. It may be missing a small icon. I don’t know how to send executable code.
Copy code The code is as follows:









验证控件



验证控件





邮编:


邮政编码只能为6位数字,有助于更快邮寄或快递。



网址:


请正确输入url地址



邮箱:


请输入正确的E-mail格式,并带有@符号,不区分大小写。



手机:


手机号码只能为11位数字。



整数:


请正确输入整数









Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template