[7] JavaScript & JQuery - $(document).on()

[ 환경 ]
ㄴ JQuery 1.11.1

Q. 비밀번호 확인에서 일치여부를 실시간으로 확인하고 싶습니다.

---

1. html 코드

ㄴ 일치, 불일치 텍스트는 이벤트 감지 전엔 안보이도록 display:none 상태

 

2. JQuery 코드 작성

$(document).on('keyup', '.password_ch', function(){
	var password = $(".password").val(); // 비밀번호
	var password_ch = $(".password_ch").val(); // 비밀번호 확인
	if(password){
            if(password == password_ch){ // 비밀번호 일치
                $(".pw_O").show();
                $(".pw_X").hide();
            }else{ // 비밀번호 불일치
                $(".pw_X").show();
                $(".pw_O").hide();
            }
	}
});

ㄴ document on은 실시간 감지에 유용하게 사용할 수 있다.

ㄴ 비밀번호 확인 input에 값이 입력되는 순간 이벤트 감지가 되도록 keyup을 넣어주었다.

ㄴ 일치, 불일치를 비밀번호확인 값 여부로 나타나고 사라지도록 설정하였다.

 

 

3. 사이트(기능) 확인

 

ㄴ Q. 비밀번호 확인에서 일치여부를 실시간으로 확인하고 싶습니다.

-  완료