08_Spring_240412(금)_63일차(0) - ★BoardProject★ - 4. 회원가입 - 비밀번호, 닉네임, 전화번호

4-2) 비밀번호 유효성, 일치 여부 검사

💡 checkPw 함수 생성하여 코드 재사용

signup.js

/* 비밀번호 / 비밀번호 확인 유효성 검사 */

// 1) 비밀번호 관련 요소 얻어오기
const memberPw = document.querySelector("#memberPw");
const memberPwConfirm = document.querySelector("#memberPwConfirm");
const pwMessage = document.querySelector("#pwMessage");

// 5) 비밀번호, 비밀번호 확인이 같은지 검사하는 함수
const checkPw = () => {
    
    // 같을 경우
    if(memberPw.value === memberPwConfirm.value) {
        pwMessage.innerText = "비밀번호가 일치합니다.";
        pwMessage.classList.add("confirm");
        pwMessage.classList.remove("error");
        checkObj.memberPwConfirm = true;
        return;
    }

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

}

// 2) 비밀번호 유효성 검사
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)) { // 4-1) 유효하지 않으면
        pwMessage.innerText = "비밀번호가 유효하지 않습니다.";
        pwMessage.classList.add("error");
        pwMessage.classList.remove("confirm");
        checkObj.memberPw = false;
        return;
    }

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

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

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


});

// 7) 비밀번호 확인 유효성 검사
// 단, 비밀번호(memberPw)가 유효할 때만 검사 수
memberPwConfirm.addEventListener("input", e => {
    
    if(checkObj.memberPw) { // memberPw가 유효한 경우
        checkPw(); // 비교하는 함수 수행
        return;
    }

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

4-3) 닉네임 유효성, 중복 검사

💡 @RequestParam

signup.js

/* 닉네임 유효성 검사 */

const memberNickname = document.querySelector("#memberNickname");
const nickMessage = document.querySelector("#nickMessage");

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

    const inputNickname = e.target.value;

    // 입력 x
    if(inputNickname.trim().length === 0) {
        nickMessage.innerText = "한글,영어,숫자로만 2~10글자";
        nickMessage.classList.remove("error", "confirm");
        
        checkObj.memberNickname = false;
        memberNickname.value = "";
        return;

    }

    const regExp = /^[가-힣\w\d]{2,10}$/;

    // 닉네임 유효성 검사
    if(!regExp.test(inputNickname)) { // 유효 X
        nickMessage.innerText = "닉네임 형식이 유효하지 않습니다."
        nickMessage.classList.add("error");
        nickMessage.classList.remove("confirm");
        checkObj.memberNickname = false;
        return;
    }

    fetch("/member/checkNickname?memberNickname=" + inputNickname)
    .then(resp => resp.text())
    .then(count => {

        if(count == 1) { // 중복 O
            nickMessage.innerText = "이미 사용중인 닉네임입니다.";
            nickMessage.classList.add("error");
            nickMessage.classList.remove("confirm");
            checkObj.memberNickname = false;
            return;
        }

        nickMessage.innerText = "사용 가능한 닉네임입니다.";
        nickMessage.classList.add("confirm");
        nickMessage.classList.remove("error");
        checkObj.memberNickname = true;

    });
    
});

Member 컨트롤러

/** 닉네임 중복 검사
 * @return 중복 1, 아님 0
 */
@ResponseBody
@GetMapping("checkNickname")
public int checkNickname(@RequestParam("memberNickname") String memberNickname) {
	return service.checkNickname(memberNickname);
}

member-mapper.xml

<!-- 닉네임 중복 검사 -->
<select id="checkNickname" resultType="_int">
	SELECT COUNT(*)
	FROM "MEMBER"
	WHERE MEMBER_DEL_FL = 'N'
	AND MEMBER_NICKNAME = #{memberNickname}
</select>

4-4) 전화번호 유효성 검사

signup.js

/* 전화번호 유효성 검사 */

// 전화번호를 입력해주세요.(- 제외)
const memberTel = document.querySelector("#memberTel");
const telMessage = document.querySelector("#telMessage");


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

    const inputTel = e.target.value;

    // 입력 X
    if(inputTel.trim().length === 0) {
        telMessage.innerText = "전화번호를 입력해주세요.(- 제외)";
        telMessage.classList.remove("confirm", "error");
        memberTel.value = "";
        checkObj.memberTel = false;

        return;
    }

    // 정규식 검사
    const regExp = /^01[0-9]{1}[0-9]{3,4}[0-9]{4}$/;

    if(!regExp.test(inputTel)) { // 유효 x
        telMessage.innerText = "전화번호 형식이 유효하지 않습니다."
        telMessage.classList.add("error");
        telMessage.classList.remove("confirm");
        checkObj.memberTel = false;
        return;
    }

    telMessage.innerText = "유효한 전화번호 형식입니다.";
    telMessage.classList.add("confirm");
    telMessage.classList.remove("error");
    checkObj.memberTel = true;

});