Spring Boot Board Project_07 비밀번호 유효성 검사

입력 받은 값을 js에서 다 처리해주면 됨

1. 비밀번호 관련 요소 얻어오기

signup.js

const memberPw = document.querySelector("#memberPw");
const memberPwConfirm = document.querySelector("#memberPwConfirm");
const pwMessage = document.querySelector("#pwMessage");

2. 비밀번호, 비밀번호 화인이 같은지 검사하는 함수

const checkPw = () => {

    // 같을 경우
    if(memberPw.value === memberPwConfirm.value) {
        pwMessage.innerText = "비밀번호가 일치합니다.";
        pwMessage.classList.add('confirm');
        pwMessage.classList.remove('error');
        checkObj.memberPwConfirm = true; // 비밀번호 확인 true
        return;
    }

    pwMessage.innerText = "비밀번호가 일치하지 않습니다.";
    pwMessage.classList.add('error');
    pwMessage.classList.remove('confirm');
    checkObj.memberPwConfirm = false; // 비밀번호 확인 true
    return;
};

3. 비밀번호 유효성 검사

memberPw.addEventListener("input", e => {

    // 입력 받은 비밀번호 값
    const inputPw = e.target.value;

    // 3) 입력되지 않은 경우
    if(inputPw.trim().length === 0) {
        pwMessage.innerText = "영어,숫자,특수문자(!,@,#,-,_) 6~20글자 사이로 입력해주세요.";
        pwMessage.classList.remove('confirm','error');
        checkObj.memberPw = false; // 비밀번호가 유효하지 않다고 표시
        memberPw.value = ""; // 처음에 띄어쓰기 입력 못하게 하기
        return;
    }

    // 4) 입력 받은 비밀번호 정규식 검사
    const regExp = /^[a-zA-Z0-9!@#_-]{6,20}$/;

    // 유효하지 않으면
    if(!regExp.test(inputPw)) {
        pwMessage.innerText = "비밀번호가 유효하지 않습니다.";
        pwMessage.classList.add('error');
        pwMessage.classList.remove('confirm');
        checkObj.memberPw = false;
        return;
    }

    // 유효한 경우
    pwMessage.innerText = "유효한 비밀번호 형식입니다.";
    pwMessage.classList.add('confirm');
    pwMessage.classList.remove('error');
    checkObj.memberPw = true;

    // 비밀번호 입력 시 확인란의 값과 비교하는 코드 추가

    // 비밀번호 확인에 값이 작성되어 있을 때
    if(memberPwConfirm.value.length > 0) {
        checkPw();
    }
});

4. 비밀번호 확인 유효성 검사

memberPwConfirm.addEventListener("input", () => {

    // memberPw 가 유효한 경우에만 수행
    if(checkObj.memberPw) {
        checkPw(); // 비교하는 함수 수행
        return;
    }

    // memberPw 가 유효하지 않은 경우는 memberPwConfirm 검사 X
    checkObj.memberPwConfirm = false;
});