본문 바로가기
Spring

[SpringBoot/Thymeleaf] ajax 회원가입 중복체크 2

by noddu 2022. 6. 28.
728x90
반응형

register.html

<script>
    function Check() {
        let name = $('#name').val();
        let email = $('#email').val();
        let nickname = $('#nickname').val();
        $.ajax({
            type: 'GET',
            url: "/account/check", //Controller 주소
            data: {
                name: name,
                email: email,
                nickname: nickname
            },
            success: function (data) {
                console.log(data);
                let chkArr = data.split("|");
                chkArr[0] = Number(chkArr[0]);
                chkArr[1] = Number(chkArr[1]);
                chkArr[2] = Number(chkArr[2]);

                if (name) {
                    if (chkArr[0] > 0) {
                        $("#checkId").text('이미 사용중인 이름입니다');
                        document.getElementById("checkId").style.color = '#ff0000';
                    } else {
                        $("#checkId").text('사용 가능한 이름입니다');
                        document.getElementById("checkId").style.color = '#00d0ff';
                    }
                }

                if(email){
                if (chkArr[1] > 0) {
                    $("#checkEmail").text('이미 사용중인 이메일입니다');
                    document.getElementById("checkEmail").style.color = '#ff0000';
                } else {
                    $("#checkEmail").text('사용 가능한 이메일입니다');
                    document.getElementById("checkEmail").style.color = '#00d0ff';
                }
                }

                if(nickname){
                if (chkArr[2] > 0) {
                    $("#checkNick").text('이미 사용중인 닉네임입니다');
                    document.getElementById("checkNick").style.color = '#ff0000';
                } else {
                    $("#checkNick").text('사용 가능한 닉네임입니다');
                    document.getElementById("checkNick").style.color = '#00d0ff';
                }
                }
                if ( chkArr[0] > 0 || chkArr[1] > 0 || chkArr[2] > 0 ) {
                    $("#btn_sub").attr("disabled", true);
                } else {
                    $("#btn_sub").attr("disabled", false);
                }

            },
            error: function () {
                alert("에러입니다");
            }
        });
    }

</script>

data로 넘어갈 param을 늘리고 세부 조건을 추가했다

세개의 param을 합친 return값을 구분자로 나누어

조건을 추가했다


domain

@NotBlank(message = "이름은 필수 입력 값입니다.")
private String name;

@NotBlank(message = "비밀번호는 필수 입력 값입니다.")
private String password;

@Pattern(regexp = "^(?:\\w+\\.?)*\\w+@(?:\\w+\\.)+\\w+$", message = "이메일 형식이 올바르지 않습니다.")
@NotBlank(message = "이메일은 필수 입력 값입니다.")
private String email;

@Pattern(regexp = "^[ㄱ-ㅎ가-힣a-z0-9-_]{2,10}$", message = "닉네임은 특수문자를 제외한 2~10자리여야 합니다.")
@NotBlank(message = "닉네임은 필수 입력 값입니다.")
private String nickname;

 

각 맞는 Pattern과 NotBlank를 추가했다


Controller

@ResponseBody
@GetMapping("/check")
public String nameCheck(@RequestParam String name, @RequestParam String email, @RequestParam String nickname){
    int nameCnt = userService.idCheck(name);
    int emailCnt = userService.emailCheck(email);
    int nickCnt = userService.nickCheck(nickname);
    String result = nameCnt+"|"+emailCnt+"|"+nickCnt;

    return result;
}

int값을 구분자를 붙여 String형태로 return했다

(위 javascirpt에서 다시 나눔)


Service

public int idCheck(String name){
    int cnt = (int)userDJRepository.countByName(name);
    return cnt;
}

public int emailCheck(String name){
    int cnt = (int)userDJRepository.countByEmail(name);
    return cnt;
}

public int nickCheck(String name){
    int cnt = (int)userDJRepository.countByNickname(name);
    return cnt;
}

Spring Data JPA로 count했다


Repository

public interface UserDJRepository extends JpaRepository<Member, Long> {
    boolean existsByName(String name);
    long countByName(String name);
    long countByEmail(String email);
    long countByNickname(String nickname);
}

 

 

반응형