[Tistory] 비밀번호 동일체크(샘플링)

• key event

1. 샘플코드 만들기 - VScode go!!

2. input 이벤트 추가

비밀번호가 일치하면 일치하다는 글자가 떠야하고,
일치하지 않으면 일치하지 않다는 글자가 떠야함 

선택자끼리 직접 비교 x

<script>
            $("#same-password").on("input", function() {
                // const password = $("#password").val();
                // const confirmPassword = $(this).val();

                let password = $("#password").val();   // 비밀번호 입력값
                console.log("패스워드 = " + password);
                
                let confirmPassword = $(this).val(); // 비밀번호 확인 입력값
                console.log("확인용 = " + confirmPassword);

                if (password === confirmPassword) {
                    $("#successText").show();
                    $("#errorText").hide();
                    $("#same-password").removeClass("error").addClass("correct");

                } else {
                    $("#successText").hide();
                    $("#errorText").show();
                    $("#same-password").removeClass("correct").addClass("error");
                }
            });
    </script>
    

• const를 사용할까 했으나 비밀번호와 비밀번호 확인 입력 필드의 값을 매번 비교하여 일치 여부를 판단하는 코드에서 let을 사용하기로 함(추후 눈깜빡이는 뷰로 바꿀 것이므로)

3. 비번 다 지웠을때 Text 보이지 않게

4. 비번 일치하면 버튼, 텍스트 색상 변경

6. 비밀번호 동일 체크 부분 코드 수정 - 전체코드

<input id="same-password" class="my_auth_form_box_input" type="password" name="" placeholder="비밀번호 확인"
                        maxlength="20" required />
                        <div id="errorText" style="color: red">비밀번호가 일치하지 않습니다.</div>
                        <div id="successText" style="color: blue">비밀번호가 일치합니다.</div>

<!-- 비밀번호 동일 체크 -->
<script>
        $("#same-password").on("input", function() {
            let password = $("#password").val(); // 비밀번호 입력값
            console.log("패스워드 = " + password);

            let confirmPassword = $("#same-password").val(); // 비밀번호 확인 입력값
            console.log("확인용 = " + confirmPassword);


            if (password === confirmPassword) {
                $("#successText").show();
                $("#errorText").hide();
                $("#same-password").removeClass("error").addClass("correct");
                $("#joinBtn").css({
                    "background-color": "rgb(255, 85, 68)",
                    "color": "rgba(255,255,255,.8)"
                });
        

            } else if (confirmPassword === "") {
                $("#successText").hide();
                $("#errorText").hide();

            } 
            else {
                $("#successText").hide();
                $("#errorText").show();
                $("#same-password").removeClass("correct").addClass("error");

                 $("#joinBtn").css({
                    "background-color": "",
                    "color": ""
                });
            }
        });
  </script>
  <!-- 비밀번호 동일 체크 끝-->