회원 가입 시 비밀번호 일치 여부 체크하기
아래 그림과 같이 회원 가입 시 비밀번호 확인에 비밀번호를 입력하면 비밀번호가 일치하는지 체크하는 기능을 만든다.
비밀번호가 일치하면 회원가입이 진행된다. 다른 입력항목 체크 로직도 만든다.
memberForm.jsp
...
<script>
$(document).ready(function(){
$("#join").click(function(){
var gubun = $('#btnOverlapped').prop('disabled');
if(!gubun){
alert('중복체크를 클릭해주세요.');
return;
}
if(!compare_result){
alert('비밀번호가 일치하지 않습니다.');
return;
}
$("#joinForm").submit();
});
});
...
var compare_result = false;
function fn_compare_pwd(){
var pwd1 = $("#member_pwd1").val();
var pwd2 = $("#member_pwd2").val();
var $s_result = $("#s_result");
if(pwd1 == pwd2){
compare_result = true;
$s_result.text("비밀번호가 일치합니다.");
return;
}
compare_result = false;
$s_result.text("비밀번호가 일치하지 않습니다.");
}
</script>
</head>
<body>
...
<tr class="dot_line">
<td class="fixed_join">비밀번호</td>
<td><input name="member_pw" name="member_pw1" type="password" size="20" /></td>
</tr>
<tr class="dot_line">
<td class="fixed_join">비밀번호 확인</td>
<td>
<input name="member_pw2" id="member_pw2" type="password" size="20" onKeyUp="fn_compare_pwd();"/>
<span id="s_result" style="font-size: 12px;">비밀번호가 일치하지 않습니다.</span>
</td>
</tr>
...