JSP AJAX를 이용한 실시간 아이디 중복확인

탁쳐

추천 수 153

가입화면

ID 입력시 실시간으로 중복확인을 수행해 가입 가능한 아이디일 경우 초록색 바탕으로 나타내고 공백이거나 이미 사용중인 아이디일 경우 붉은 바탕으로 표시합니다.

bb라는 아이디는 이미 가입된 아이디이므로 bb일때는 붉은 바탕을 나타나게 합니다.

Password 또한 패스워드확인에 입력된 내용과 패스워드가 다를 경우 붉은바탕으로 표시합니다.

아이디, 패스워드에 이상이 없고 닉네임과 이메일을 포함한 모든 내용이 입력되었을 경우 Sign Up 버튼을 활성화 해 가입을 허용합니다.

1
2
3
4
5
6
<select id="checkId"
    parameterType="project.jyland.member.model.JYUser"
    resultType="java.lang.Integer">
    SELECT NVL(COUNT(*),0)
    FROM JYUSER WHERE ID=#{id}
</select>
Colored by Color Scripter
cs

ID중복 확인을 위한 sql문을 작성했습니다.

1
2
3
4
@RequestMapping(value = "checkId.jy", method = { RequestMethod.GET, RequestMethod.POST})
    public @ResponseBody int idCheck(JYUser user, Model model) {
        return jYUserService.checkId(user);
    }//
Colored by Color Scripter
cs

컨트롤러입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<label><b>ID</b></label>
            <input type="text" placeholder="Enter ID"
                    name="id" required class="id" oninput="checkId()" id="checkaa"> 
<label><b>Nickname</b></label>
            <input type="text" placeholder="Enter Nickname" name="nickname"
                    required class="id" id="nickname" oninput="checkId()"> 
<label><b>Email</b></label> 
            <input    type="text" placeholder="Enter Email" name="email" required    
                class="id" id="email" oninput="checkId()"> 
<label> <b>Password</b></label> 
            <input    type="password" placeholder="Enter Password" name="upwd" 
                required class="pass" oninput="checkPwd()">
<label> <b>Repeat Password</b></label> 
            <input type="password"    placeholder="Repeat Password" name="psw-repeat" 
                required class="pass" id="repwd" oninput="checkPwd()"> 
            <input    type="checkbox" checked="checked"> Remember me
        <div class="clearfix">
            <button type="button" class="cancelbtn" 
                onclick='$("#_joinsung").css("display", "none")' >Cancel</button>
            <button type="submit" class="signupbtn" disabled="disabled">Sign Up</button>
cs

회원가입 창의 html구조입니다.

ID를 입력할 input 태그 안에는 oninput을 달아 입력을 할 때마다 checkId() 메소드가 수행되게 합니다.

PW를 입력하는 input에도 oninput으로 checkPwd()메소드를 수행되게 합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<script>
 
//     아이디와 비밀번호가 맞지 않을 경우 가입버튼 비활성화를 위한 변수설정
    var idCheck = 0;
    var pwdCheck = 0;
    //아이디 체크하여 가입버튼 비활성화, 중복확인.
    function checkId() {
        var inputed = $('.id').val();
        $.ajax({
            data : {
                id : inputed
            },
            url : "checkId.jy",
            success : function(data) {
                if(inputed=="" && data=='0') {
                    $(".signupbtn").prop("disabled", true);
                    $(".signupbtn").css("background-color", "#aaaaaa");
                    $("#checkaa").css("background-color", "#FFCECE");
                    idCheck = 0;
                } else if (data == '0') {
                    $("#checkaa").css("background-color", "#B0F6AC");
                    idCheck = 1;
                    if(idCheck==1 && pwdCheck == 1) {
                        $(".signupbtn").prop("disabled", false);
                        $(".signupbtn").css("background-color", "#4CAF50");
                        signupCheck();
                    } 
                } else if (data == '1') {
                    $(".signupbtn").prop("disabled", true);
                    $(".signupbtn").css("background-color", "#aaaaaa");
                    $("#checkaa").css("background-color", "#FFCECE");
                    idCheck = 0;
                } 
            }
        });
    }
Colored by Color Scripter
cs

checkId(), ID 중복확인을 위한 메소드입니다. input박스에 oninput="checkId()"를 달아 놓았기 ??문에 입력할 때 마다 이 메소드가 수행됩니다.

ajax를 이용해서 서버에 아이디 중복 확인을 위한 데이터를 요청합니다.

아이디가 중복되었을 경우 data는 0으로 출력되며 중복되지 않았을 때 1로 출력됩니다.

조건문을 알맞게 사용해서 뒷 배경을 초록색이나 붉은색으로 출력하게 했습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
//재입력 비밀번호 체크하여 가입버튼 비활성화 또는 맞지않음을 알림.
    function checkPwd() {
        var inputed = $('.pass').val();
        var reinputed = $('#repwd').val();
        if(reinputed=="" && (inputed != reinputed || inputed == reinputed)){
            $(".signupbtn").prop("disabled", true);
            $(".signupbtn").css("background-color", "#aaaaaa");
            $("#repwd").css("background-color", "#FFCECE");
        }
        else if (inputed == reinputed) {
            $("#repwd").css("background-color", "#B0F6AC");
            pwdCheck = 1;
            if(idCheck==1 && pwdCheck == 1) {
                $(".signupbtn").prop("disabled", false);
                $(".signupbtn").css("background-color", "#4CAF50");
                signupCheck();
            }
        } else if (inputed != reinputed) {
            pwdCheck = 0;
            $(".signupbtn").prop("disabled", true);
            $(".signupbtn").css("background-color", "#aaaaaa");
            $("#repwd").css("background-color", "#FFCECE");
            
        }
    }
    //닉네임과 이메일 입력하지 않았을 경우 가입버튼 비활성화
    function signupCheck() {
        var nickname = $("#nickname").val();
        var email = $("#email").val();
        if(nickname=="" || email=="") {
            $(".signupbtn").prop("disabled", true);
            $(".signupbtn").css("background-color", "#aaaaaa");
        } else {
        }
    }
    //캔슬버튼 눌렀을 눌렀을시 인풋박스 클리어
    $(".cancelbtn").click(function(){
            $(".id").val(null);
            $(".pass").val('');
            $(".signupbtn").prop("disabled", true);
            $(".signupbtn").css("background-color", "#aaaaaa");
    });
</script>
Colored by Color Scripter
cs

패스워드 체크, 닉네임과 이메일을 입력 받도록 강제하는 메소드들을 작성해줍니다.

모두 조건에 맞을 경우 Sign Up 버튼이 초록색으로 나타나게 되구요.

캔슬 버튼으로 창을 껏을때 input박스에 입력했던 내용들이 남게되어 캔슬버튼을 눌렀을 때 input박스들을 비우도록 했습니다.

< Prev The Chat Room

이너넷 테스트중입니다 Next >

♥