JQuery는 간단한 확인 코드 프롬프트를 구현합니다.

먼저 렌더링을 살펴보겠습니다.

요구 사항: 입력 상자에 초점이 맞춰지면 자동으로 확인 이미지가 표시됩니다.
코드는 다음과 같습니다(학습 및 참고용).

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

/***********************다음은 인증코드 대상입니다*****************/
var Validation = {}
Validation.init = function(eleName,imageSrc){
this.image =
$('#' eleName).focusin(function(){
Validation.show(eleName);
})
}
Validation.image =
검증. display=false;
Validation.width = '100px';
Validation.div = null;
Validation.show = function(eleName) if(this.display= =false){
//첫 번째 표시
if(this.div==null){
$('#' eleName).after('

');
this.div = $('#div_validation_' eleName);
this .div.css('위치','절대');
this.div.css('cursor','pointer')
this.div.css('border','1px solid #CCC ');
this .div.css('배경색','#FFF')
this.div.css('배경위치','center')
this.div .css('배경 반복','반복 없음');
this.div.css('height',this.height)
this.div.css('width',this.width );
var objOffset = $('#' eleName).offset();
objOffset.top =$('#' eleName).height() 6; );
this.div.css('Background-image','url(' Validation.image '&_t=' new Date() ')'); 'inline-block');
this.display = true;
//
this.div.click(function(){
Validation.div.css('Background-image)를 바꾸려면 클릭하세요. ','url(' Validation.image '&_t=' new Date() ')')
})
}
else{
this.div.css('Background-image ','url(' Validation.image '&_t=' new Date() ')')
this.display = true
this.div.css('display','inline-block') ;
}
}
}
Validation.hide =function(){
if(this.display==true){
this.display = false
this; .div.hide(); }
}



사용법
:

코드 복사

코드는 다음과 같습니다. //검증코드 객체 초기화Validation.init('validation','Ajax.ashx?handle=validation') ;

//입력박스 ID 확인 이미지 주소

//숨기기
Validation.hide()