Spring Boot Board Project_08 닉네임, 전화번호 유효성 검사

송지윤·2024년 4월 20일

Spring Framework

목록 보기

40/65

닉네임 유효성 검사

1. 닉네임 유효성 검사 관련 요소 얻어오기

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

2. 닉네임 입력할 때마다 유효성 검사 함수 정의, 비동기로 Controller 에 값 보내고 돌려받은 값 처리

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

    const inputNickname = e.target.value;

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

    // 2) 정규식 검사
    const regExp = /^[가-힣\w\d]{2,10}$/;

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

    // 3) 중복 검사(유효한 경우)
    fetch("/member/checkNickname?memberNickname=" + inputNickname)
    .then(resp => resp.text())
    .then(count => {

        // 중복 되는 경우
        if(count == 1) {
            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;
    })
    .catch(err => console.log(err));
});

3. fetch 요청 받은 Controller 에서 Service 호출 mapper sql 문 실행 후 값 돌려주기

MemberController

	@ResponseBody
	@GetMapping("checkNickname")
	public int checkNickname(@RequestParam("memberNickname") String memberNickname) {
		return service.checkNickname(memberNickname);
	}

MemberServiceImpl

	@Override
	public int checkNickname(String memberNickname) {
		return mapper.checkNickname(memberNickname);
	}

MemberMapper

	int checkNickname(String memberNickname);

member-mapper.xml

	<select id="checkNickname" resultType="_int">
		SELECT COUNT(*)
		FROM "MEMBER"
		WHERE MEMBER_DEL_FL = 'N'
		AND MEMBER_NICKNAME = #{memberNickname}
	</select>

결과 화면

전화번호 유효성 검사

정규식 검사만 하면 됨

1. 전화번호 관련 요소 얻어오기

const memberTel = document.querySelector("#memberTel");
const telMessage = document.querySelector("#telMessage");

2. 전화번호 입력할 때마다 유효성 검사

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

    const inputMemberTel = e.target.value;

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

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

    if(!regExp.test(inputMemberTel)) { // 유효하지 않을 때
        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;
    
    console.log(checkObj);
});