jQuery :: 제이쿼리를 이용하여 비밀번호 값 비교하기 (키보드 눌렀을때 비교)

비밀번호 값 비교하기

회원가입을 할때, 비밀번호를 잘못치는경우가 있을 수 있다. 그래서 보통 비밀번호를 2번 입력하여 그 값이 일치하는지 확인한다. jQuery(제이쿼리)를 이용해서 <input>태그의 비밀번호 값 2개를 가져와서 비교해보자.

 

<input>태그 추가

HTML에서 비밀번호 입력을 받을 <input>태그 2개를 추가한다.

<label>비밀번호</label>
<input type="password" name="userPwd" id="pwd1" class="form-control" required />
<br>

<label>재확인</label>
<input type="password" name="reuserPwd" id="pwd2" class="form-control" required />
<br>
​

id값을 각각 "pwd1", "pwd2"로 설정해줬다.

 

경고 글 추가

2개의 비밀번호값이 일치할때는 "비밀번호가 일치합니다."라는 글을 보이게 하고, 다를때는 "비밀번호가 일치하지 않습니다."라는 글이 보이게 한다.

<div class="alert alert-success" id="alert-success">비밀번호가 일치합니다.</div>
<div class="alert alert-danger" id="alert-danger">비밀번호가 일치하지 않습니다.</div>​

 

jQeury를 이용한 값 비교

마지막으로 jQuery를 이용하여 값을 비교한다.

<script type="text/javascript">
    $(function(){
        $("#alert-success").hide();
        $("#alert-danger").hide();
        $("input").keyup(function(){
            var pwd1=$("#pwd1").val();
            var pwd2=$("#pwd2").val();
            if(pwd1 != "" || pwd2 != ""){
                if(pwd1 == pwd2){
                    $("#alert-success").show();
                    $("#alert-danger").hide();
                    $("#submit").removeAttr("disabled");
                }else{
                    $("#alert-success").hide();
                    $("#alert-danger").show();
                    $("#submit").attr("disabled", "disabled");
                }    
            }
        });
    });
</script>​

처음 페이지에 들어왔을때는 아무런 경고 글도 보이면 안된다. 그래서 ".hide()"를 이용해서 숨겨둔다. input 태그에 입력이 들어왔을때, "#pwd1", "#pwd2" 비밀번호 태그의 id값을 이용해서 값을 가져온다. 2개의 비밀번호 값이 일치할 경우와 일치하지 않을 경우, ".show()"를 이용해서 알맞은 경고창을 띄어준다. 

.hide() : 화면에 보이지 않게 숨겨줌

css로 보면 "display:none;"과 같음

.show() : 화면에 보이게 설정해줌

css로 보면 "display:block;"과 같음

 

그리고 비밀번호가 일치하는 경우 <form>태그의 "submit" 버튼을 활성화 시켜준다. 다를 경우는 비활성화 시켜준다. (여기서는 submit 버튼의 id를 "#submit"으로 설정했음)

.attr("disabled", "disabled") : 버튼 비활성화

.removeAttr("disabled") : 버튼 비활성화 속성을 제거

 

결과

처음 화면

 

비밀번호를 다르게 입력한 경우

 

비밀번호를 일치하게 입력한 경우