[spring] 회원가입 비밀번호 일치 확인

비밀번호 일치 여부 확인하기

join.jsp

 

1. 비밀번호를 입력하는 칸을 2개 만들어서 각각 id를 지정한다.

• id="password1"
• id="password2"

 

2. 비밀번호를 확인하는 password2의 input에는 onkeyup="passConfirm()"을 추가함.

 

			<div class="mb-3 row">
				<label for="inputPassword" class="col-sm-2 col-form-label">비밀번호</label>
				<div class="col-sm-5">
					<input type="password" class="form-control" id="password1" placeholder="암호를 입력하세요" required>
				</div>
				<div class="col-sm-5">
					<input type="password" class="form-control" id="password2" onkeyup="passConfirm()" placeholder="암호를 입력하세요" required>
					<span id ="confirmMsg"></span>
				</div>
			</div>

 

javascript 함수

password2에서 만들어준 passConfirm()함수는 두 비밀번호를 비교해서 일치 여부를 확인.

<script type="text/javascript">

	function passConfirm() {
        var password1 = document.getElementById('password1');
        var password2 = document.getElementById('password2');
        var confirmMsg = document.getElementById('confirmMsg');
        var correctColor = "#E40087";
        var wrongColor = "#18AD72";
        
        if (password1.value === password2.value) {
            confirmMsg.style.color = correctColor;
            confirmMsg.innerHTML = "비밀번호가 일치합니다.";
        } else {
            confirmMsg.style.color = wrongColor;
            confirmMsg.innerHTML = "비밀번호가 일치하지 않습니다.";
        }
    }

    // 사용자가 password1 또는 password2 입력란에서 타이핑을 마치면 passConfirm() 호출
    document.getElementById('password1').addEventListener('blur', passConfirm);
    document.getElementById('password2').addEventListener('blur', passConfirm);
    
</script>

 

실행화면