[jQuery] 비밀번호 재확인 기능 구현

안녕하세요 코북입니다.

오늘은 비밀번호 재확인 기능 구현했던 것을 기록하려고 합니다.

 

<table border = "1px solid black">	
	<form action = "JoinService" method = "post">
		<tr>
			<td>ID</td>
			<td><input type = "text" name = "id"></td>
		</tr>
		<tr>
			<td>PW</td>
			<td><input type = "password" name = "pw"></td>				
		</tr>
		<tr>
			<td>PW 확인</td>
			<td><input type = "password" name = "pw2"></td>
		</tr>
		<tr>
			<td align = "center"><input type = "submit" value = "가입하기"></td>
		</tr>
	</form>
</table>

 

우선 간단하게 아이디와 비밀번호를 입력할 수 있는 table을 만들었고

form태그를 사용해서 입력받은 정보를 JoinService로 보내줄 수 있게 만들었습니다.

 

<tr>
	<td>PW 확인</td>
	<td colspan = "2">
		<input type = "password" name = "pw2">
		<font id = "checkPw" size = "2"></font>
	</td>
</tr>

 

<td>PW 확인</td>에 값을 넣은 후 바로 일치 불일치 여부를 표시해주려고 합니다.

<font>태그를 빈칸으로 만들어놓은 후, 일치 불일치 여부에 따라 값을 넣어줄 계획입니다.

이때, font태그에 접근하기 위해 id값을 설정했습니다.

td값이 두 개가 되었으니 colspan으로 병합시켜주세요

 

 

<tr>
	<td>PW</td>
	<td><input type = "password" name = "pw" class = "pw" id = "password_1" ></td>		
</tr>
<tr>
	<td>PW 확인</td>
	<td colspan = "2">
		<input type = "password" name = "pw2" class = "pw" id = "password_2" >
		<font id = "checkPw" size = "2"></font>
	</td>
</tr>

 

사용자가 비밀번호를 입력할 때 함수가 작동할 수 있도록 하기 위해

<input>에 id와 class를 설정해줍니다

 

<script src = "js/jquery-3.6.0.min.js"></script>
<script>
	$('.pw').focusout(function(){
    
    
    })
    
</script>

 

jQuery를 이용하기 위해 <script>태그 안에 jQuery를 불러옵니다.

 

$('.pw')로 클래스값이 pw인 선택자들에 접근하고.

요소가 포커스를 벗어났을 때 이벤트를 주기 위해 focusout()을 이용합니다. 저는 focusout을 사용했지만, keyup, keydown 등 다양한 방법으로 구현이 가능합니다. keyup은 키보드에서 손을 떼어냈을 때 이벤트가 발생하기 때문에 keyup도 좋을 것 같습니다.

 

<script src = "js/jquery-3.6.0.min.js"></script>
<script>
	$('.pw').focusout(function(){
    	let pass1 = $("#password_1").val();
        let pass2 = $("#password_2").val();
        
        if (pass1 != "" || pass2 != ""){
        	if (pass1 == pass2){
            	$("#checkPw").html('일치');
            	$("#checkPw").attr('color','green');
            } else {
            	$("#checkPw").html('불일치');
                $("#checkPw").attr('color','red');
            }
        }
    
    })
    
</script>

 

pass1과 pass2 변수에 사용자가 입력한 값을 받아줍니다.

 

if문을 사용해 pass1과 pass2가 일치하면 <font> 태그에 일치가 나오도록 해줍니다.

똑같은 방법으로 pass1과 pass2가 불일치하면 <font>태그에 불일치가 나오도록 해줍니다.

 

<table border = "1px solid black">	
	<form action = "JoinService" method = "post">
		<tr>
			<td>ID</td>
			<td><input type = "text" name = "id"></td>
		</tr>
		<tr>
			<td>PW</td>
			<td><input type = "password" name = "pw" class = "pw" id = "password_1" ></td>	
		</tr>
		<tr>
			<td>PW 확인</td>
			<td colspan = "2">
				<input type = "password" name = "pw2" class = "pw" id = "password_2" >
				<font id = "checkPw" size = "2"></font>
			</td>
		</tr>
		<tr>
			<td colspan = "2" align = "center">
				<input type = "submit" value = "가입하기">
			</td>
		</tr>
	</form>
</table>

<script src = "js/jquery-3.6.0.min.js"></script>
<script>
	$('.pw').keyup(function(){
    	let pass1 = $("#password_1").val();
        let pass2 = $("#password_2").val();
        
        if (pass1 != "" || pass2 != ""){
        	if (pass1 == pass2){
            	$("#checkPw").html('일치');
            	$("#checkPw").attr('color','green');
            } else {
            	$("#checkPw").html('불일치');
                $("#checkPw").attr('color','red');
            }
        }
    
    })
    
</script>

 

정리한 코드입니다. 이쪽에서는 keyup을 사용해봤습니다.

 

실행화면입니다.

 

지금까지 비밀번호 재확인 기능을 구현하는 방법에 대해서 알아봤습니다.

끝까지 읽어주셔서 감사합니다 ^^