210511 (회원 가입) 비밀번호 재 확인

* 패스워드 확인 부분

join.html 에서

 

폼태그, 패스워드 두개, 서브밋 버튼에 id값 부여

<tr>
    <td>아이디</td> <!-- 중복 체크 Ajax-->
    <td><input type="text" id="userid" name="userid">
        <p id="userid_msg"></p>
    </td>
</tr>

문자가 뜰 영역 p로 만들어주고

 

 

 

script처리해서 패스워드 일치할 때만 submit으로 들어가게

-> 퍼블리싱 역할

<script type="text/javascript">
    const pwd1 = document.querySelector('#userpw');
    const pwd2 = document.querySelector('#userpw_check');
    const btn = document.querySelector('#login_submit');
    const login_frm = document.querySelector('#login_frm');
    const userid_msg = document.querySelector('#userid_msg');
    const userid = document.querySelector('#userid');



    function password_check() {
        console.log(pwd1.value, pwd2.value);
        return pwd1.value == pwd2.value;    // ture or false
    }
    
    
    
    btn.addEventListener('click', () => {
        pwd_check = password_check();   // boolean값
        if (pwd_check) {
            login_frm.submit(); // 조건이 맞는 경우에만 submit
        } else {
            alert('패스워드가 서로 다릅니다.');
            pwd1.value = '';    // 패스워드 불일치한 경우 - 입력창을 비워준다.
            pwd2.value = '';
            pwd1.focus();       // 여기로 커서가 이동해라
        }
    })
</script>