Jquery 패스워드 중복 체크 기능 구현

회원가입 폼을 이용한 패스워드 중복 체크 입니다. 패스워드를 이중으로 확인하는 부분을 구현해 봤습니다.

자바스크립트 구현(removeClass, addClass, val()  함수 이용)

	$("#passwordCheck, #password").on("change", function() {
	    $('#pass_false').addClass( 'dn' ); /*실행하면 텍스트 없앰*/
	    $('#pass_true').addClass( 'dn' );
	    var password = $('#password').val(); /* 패스워드와 패스워드 확인 부분 가져오기 */
	    var passwordcheck = $('#passwordCheck').val(); 	
	    if(password == passwordcheck) {
	    	$('#pass_true').removeClass( 'dn' ); /*텍스트 보여줌*/
	        return;
	    }else {
	    	$('#pass_false').removeClass( 'dn' );
	    	pass_check = false;
	    }
	});	

 

html구현 부트 스트랩을 이용 type을 패스워드로 하면 *****이면 값이 입력이 됩니다.

	<form>
    <div class="signInMark form-group">비밀번호 : 	
	  <div class="signInLeft"><input class="form-control" id="password" type="password"name="password">
	  </div>
	  </div>
	<div class="signInMark form-group">비밀번호 확인:
	  <div class="signInLeft"><input class="form-control" id="passwordCheck" type="password"name="passwordcheck">
	  </div>
	</div>
    </form>

 

 

처음, 불일치, 일치