> 웹 프론트엔드 > JS 튜토리얼 > 유효성 검사기 유효성 검사 제어 사용 code_form 효과

유효성 검사기 유효성 검사 제어 사용 code_form 효과

WBOY
풀어 주다: 2016-05-16 18:15:37
원래의
1178명이 탐색했습니다.

다음은 js 코드입니다. (객체를 바인딩할 때 매우 촌스러운 느낌이 듭니다. 전문가의 조언을 바랍니다!)

코드 복사 코드는 다음과 같습니다.

function validator(obj,option){//Validation object
var self = this
if(!(self instanceof validator))
새 유효성 검사기 반환(obj,option);
self.source={'mobile':'^(13|14|15|18)[0-9]{9}$','postcode':' ^\d {6}$','정수':'^-?\d*$','이메일':'^\w ((-\w )|(\.\w ))*\@[A -Za- z0-9] ((\.|-)[A-Za-z0-9] )*\.[A-Za-z0-9] $','url':'^http[s]? :\/ \/([\w-] \.) [\w-] ([\w-./?%&=]*)?$'}for(self.source의 var i) {
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_oncorret';
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'; tip.innerHTML=this.text;
}
function addEvent(el,type,fn){ //이벤트 바인딩
if(el.attachEvent) {
el['e' type fn ] = fn; //창 대신 el 객체를 가리키도록 IE에서 요소 참조를 복사합니다.
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],{유형: '모바일',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;
}


다음은 페이지 데모입니다. 어떻게 되는지 모르겠습니다. 실행 가능한 코드를 보냅니다.



코드 복사

코드는 다음과 같습니다.









验证控件



验证控件





邮编:


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



网址:


请正确输入url地址



邮箱:


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



手机:


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



整数:


请正确输入整数









관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿