'ajax'에 해당되는 글 2건

  1. 2018.02.16 :: ajax_실시간 아이디 중복 체크 구현 13
  2. 2018.02.16 :: Spring(스프링) 회원가입 6
프로그래밍언어/JavaScript 2018. 2. 16. 15:53

ajax_실시간 아이디 중복 체크 구현


ajax를 이용한 실시간 아이디 중복 체크 구현


1. 개발 환경



1. Spring 4.3.7

2. tomcat 8.0

3. oracle




2. 프로젝트 구조




3. UserDTO, UserDAO 구현

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
44
45
46
47
48
49
50
51
52
package com.web.nuri.user;
 
public class UserDTO {
    private String id;
    private String pw;
    private String pwConfirm;
    private String nickName;
    private int grade;
    private int isAdmin;
    public String getId() {
        return id;
    }
    public void setId(String id) {
        this.id = id;
    }
    public String getPw() {
        return pw;
    }
    public void setPw(String pw) {
        this.pw = pw;
    }
    public String getPwConfirm() {
        return pwConfirm;
    }
    public void setPwConfirm(String pwConfirm) {
        this.pwConfirm = pwConfirm;
    }
    public String getNickName() {
        return nickName;
    }
    public void setNickName(String nickName) {
        this.nickName = nickName;
    }
    public int getGrade() {
        return grade;
    }
    public void setGrade(int grade) {
        this.grade = grade;
    }
    public int getIsAdmin() {
        return isAdmin;
    }
    public void setIsAdmin(int isAdmin) {
        this.isAdmin = isAdmin;
    }
    @Override
    public String toString() {
        return "UserDTO [id=" + id + ", pw=" + pw + ", nickName=" + nickName + ", grade=" + grade + ", isAdmin="
                + isAdmin + "]";
    }
    
}
cs


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
44
45
package com.web.nuri.userImpl;
 
import org.mybatis.spring.SqlSessionTemplate;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;
 
import com.web.nuri.user.UserDTO;
import com.web.nuri.user.UserService;
 
@Repository("UserDAO")
public class UserDAO{
    
    @Autowired
    private SqlSessionTemplate mybatis;
    
    public UserDAO() {
        // TODO Auto-generated constructor stub
        System.out.println("UserDAO 객체 생성");
    }
    public void updateUser(UserDTO udto){
        System.out.println("UserDAO.updateUser() 호출");
        mybatis.update("UserDAO.updateUser",udto);
    }
    public void deleteUser(UserDTO udto){
        System.out.println("UserDAO.deleteUser() 호출");
        mybatis.delete("UserDAO.deleteUser",udto);
    }
    public void insertUser(UserDTO udto) {
        System.out.println("UserDAO.insertUser() 호출");
        mybatis.insert("UserDAO.insertUser",udto);
    }
    public UserDTO getUser(UserDTO udto){
        System.out.println("UserDAO.getUser() 호출");
        return (UserDTO)mybatis.selectOne("UserDAO.getUser",udto);
    }
    public UserDTO getNickNameUser(UserDTO udto) {
        System.out.println("UserDAO.getNickNameUser() 호출");
        return (UserDTO)mybatis.selectOne("UserDAO.getNickNameUser",udto);
    }
    /*public int confirmUser(UserDTO udto) {
        System.out.println("UserDAO.confirmUser() 호출");
        return mybatis.selectOne("UserDAO.confirmUser",udto);
    }*/
}
 
cs




4. UserService, UserServiceImpl 구현


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
package com.web.nuri.user;
 
public interface UserService {
 
    void updateUser(UserDTO udto);
 
    void deleteUser(UserDTO udto);
 
    void insertUser(UserDTO udto);
 
    UserDTO getUser(UserDTO udto);
    
    UserDTO getNickNameUser(UserDTO udto);
    //int confirmUser(UserDTO udto);
 
}
cs


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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
package com.web.nuri.userImpl;
 
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
 
import com.web.nuri.user.UserDTO;
import com.web.nuri.user.UserService;
 
@Service
public class UserServiceImpl implements UserService {
    
    @Autowired
    private UserDAO udao;
    public UserServiceImpl() {
        // TODO Auto-generated constructor stub
        System.out.println("UserServiceImpl() 객체 생성");
    }
    @Override
    public void updateUser(UserDTO udto) {
        // TODO Auto-generated method stub
        System.out.println("UserServiceImpl:updateUser() 호출");
        udao.updateUser(udto);
    }
 
    @Override
    public void deleteUser(UserDTO udto) {
        // TODO Auto-generated method stub
        System.out.println("UserServiceImpl:deleteUser() 호출");
        udao.deleteUser(udto);
    }
 
    @Override
    public void insertUser(UserDTO udto) {
        // TODO Auto-generated method stub
        System.out.println("UserServiceImpl:insertUser() 호출");
        udao.insertUser(udto);
    }
 
    @Override
    public UserDTO getUser(UserDTO udto) {
        // TODO Auto-generated method stub
        System.out.println("UserServiceImpl:getUser() 호출");
        return udao.getUser(udto);
    }
    @Override
    public UserDTO getNickNameUser(UserDTO udto) {
        // TODO Auto-generated method stub
        return udao.getNickNameUser(udto);
    }
 
    /*@Override
    public int confirmUser(UserDTO udto) {
        // TODO Auto-generated method stub
        System.out.println("UserServiceImpl:confirmUser() 호출");
        return udao.confirmUser(udto);
    }*/
 
}
 
cs


UserService클래스와 그 구현 클래스인 UserServiceImpl를 구현한 이유는 컨트롤러에서 직접적으로 DAO에 접근을 하지 않고 Service 클래스를 한번 거쳐 비즈니스 로직을 수행하게 됨으로 DAO의 변경이 있더라도 컨트롤러 클래스의 코드의 변경은 최소화 되기 때문에 유지보수 능력이 향상 되기때문입니다.



5. UserController 구현


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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
package com.web.nuri.controller;
 
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;
 
import com.web.nuri.user.UserDTO;
import com.web.nuri.user.UserService;
 
@Controller
public class UserController {
    
    @Autowired
    private UserService userService;
    
    @RequestMapping(value="/login.do",method=RequestMethod.GET)
    public ModelAndView loginView(ModelAndView mav) {
        System.out.println("Controller.loginView() 호출");
        mav.setViewName("login");
        return mav;
    }
    @RequestMapping(value="/insertUser.do",method=RequestMethod.GET)
    public ModelAndView insertUserView(ModelAndView mav) {
        System.out.println("Controller.insertUserView() 호출");
        mav.setViewName("insertUser");
        return mav;
    }
    @ResponseBody
    @RequestMapping(value="/checkId.do")
    public int idCheck(UserDTO udto,ModelAndView mav) {
        System.out.println("Controller.idCheck() 호출");
        int result=0;
        UserDTO user=userService.getUser(udto);
        if(user!=null) result=1;
        else System.out.println("아이디사용가능");
        return result;
    }
    @ResponseBody
    @RequestMapping(value="/checkNickName.do")
    public int nickNameCheck(UserDTO udto,ModelAndView mav) {
        System.out.println("Controller.nickNameCheck() 호출");
        int result=0;
        UserDTO user=userService.getNickNameUser(udto);
        if(user!=null) result=1;
        return result;
    }
    @RequestMapping(value="/insertUser.do",method=RequestMethod.POST)
    public ModelAndView insertUser(UserDTO udto,ModelAndView mav) {
        System.out.println("Controller.insertUser() 호출");
        userService.insertUser(udto);
        mav.setViewName("login");
        return mav;
    }
}
 
cs


여기서 ajax의 실시간 아이디 중복체크에 쓰이는 메소드는 "/checkId.do"(동일 아이디가 있는지 체크)와 "/checkNickName.do"(동일 닉네임이 있는지 체크) url 매핑입니다. 각 메소드에 @ResponseBody 어노테이션이 붙은 이유는 jsp파일에서 넘어온 데이터를 이용해 로직을 처리하고 다시 jsp로 가공된 데이터를 넘길때 자동으로 json객체로 데이터를 바인딩해서 보내기 위해 붙인 어노테이션입니다.




6. pom.xml


1
2
3
4
5
6
            <!-- jackson2 -->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.7.2</version>
        </dependency>
cs


Controller에서 @ResponseBody를 이용하기 위해 jackson2 라이브러리를 받아줍니다.

(기타 applicationContext.xml , presentation-layer.xml 등의 스프링 설정파일은 Spring 카테고리의 Spring으로 회원가입을 구현한 글을 참고하시면 됩니다.)



7. insertUser.jsp


55
5657
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/latest/js/bootstrap.min.js"></script>
    <style>
    body {
        background: #f8f8f8;
        padding: 60px 0;
    }
    
    #login-form > div {
        margin: 15px 0;
    }
 
</style>
<title>회원가입</title>
</head>
<body>
    <div class="container">
        <div class="col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
            <div class="panel panel-success">
                <div class="panel-heading">
                    <div class="panel-title">환영합니다!</div>
                </div>
                <div class="panel-body">
                    <form action="insertUser.do" id="login-form" method="post">
                        <div>
                            <input type="email" class="form-control id" name="id" placeholder="Email" oninput="checkId()" id="checkaa" autofocus>
                        </div>
                        <div>
                            <input type="password" class="form-control pass" name="pw" placeholder="Password" oninput="checkPwd()">
                        </div>
                        <div>
                            <input type="password" class="form-control pass" name="pwConfirm" placeholder="Confirm Password" id="repwd" oninput="checkPwd()">
                        </div>
                        <div>
                            <input type="text" class="form-control nickname" name="nickName" id="nickname" placeholder="Your Nickname" oninput="checkNick()" autofocus>
                        </div>
                        <div>
                            <button type="submit" class="form-control btn btn-primary signupbtn" disabled="disabled">회원가입</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <script>
 
    //아이디와 비밀번호가 맞지 않을 경우 가입버튼 비활성화를 위한 변수설정
    var idCheck = 0;
    var nickCheck = 0;
    var pwdCheck = 0;
    //아이디 체크하여 가입버튼 비활성화, 중복확인.
    function checkId() {
        var inputed = $('.id').val();
        console.log(inputed);
        $.ajax({
            data : {
                id : inputed
            },
            url : "checkId.do",
            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");
                    } 
                } else if (data == '1') {
                    $(".signupbtn").prop("disabled", true);
                    $(".signupbtn").css("background-color", "#aaaaaa");
                    $("#checkaa").css("background-color", "#FFCECE");
                    idCheck = 0;
                } 
            }
        });
    }
  //재입력 비밀번호 체크하여 가입버튼 비활성화 또는 맞지않음을 알림.
    function checkPwd() {
        var inputed = $('.pass').val();
        var reinputed = $('#repwd').val();
        console.log(inputed);
        console.log(reinputed);
        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");
            }
        } else if (inputed != reinputed) {
            pwdCheck = 0;
            $(".signupbtn").prop("disabled", true);
            $(".signupbtn").css("background-color", "#aaaaaa");
            $("#repwd").css("background-color", "#FFCECE");
            
        }
    }
    //닉네임과 이메일 입력하지 않았을 경우 가입버튼 비활성화
    function checkNick() {
        var nickname = $("#nickname").val();
        console.log(nickname);
        $.ajax({
            data : {
                nickName : nickname
            },
            url : "checkNickName.do",
            success : function(data) {
                if(nickname=="" && data=='0') {
                    $(".signupbtn").prop("disabled", true);
                    $(".signupbtn").css("background-color", "#aaaaaa");
                    $("#nickname").css("background-color", "#FFCECE");
                    nickCheck = 0;
                } else if (data == '0') {
                    $("#nickname").css("background-color", "#B0F6AC");
                    nickCheck = 1;
                    if(nickCheck ==1 && pwdCheck == 1) {
                        $(".signupbtn").prop("disabled", false);
                        $(".signupbtn").css("background-color", "#4CAF50");
                    } 
                } else if (data == '1') {
                    $(".signupbtn").prop("disabled", true);
                    $(".signupbtn").css("background-color", "#aaaaaa");
                    $("#nickname").css("background-color", "#FFCECE");
                    nickCheck = 0;
                } 
            }
        });
    }
    /*캔슬버튼 눌렀을 눌렀을시 인풋박스 클리어
    $(".cancelbtn").click(function(){
            $(".id").val(null);
            $(".pass").val('');
            $(".signupbtn").prop("disabled", true);
            $(".signupbtn").css("background-color", "#aaaaaa");
    });*/
    
   </script>
</body>
</html>
 
cs


여기서 밑에 보이는 function checkId() 함수가 실시간 아이디 중복체크를 위한 함수입니다. var inputed에 입력된 id 값을 받습니다. 그리고 ajax 코드안에 json형태의 데이터(id:inputed)로 /checkId.do url에 실시간으로 아이디값을 보내게 됩니다. 그러면 controller 안에 idCheck 메소드가 실행되게 됩니다. 그래서 만약 입력한 아이디가 존재한다면 리턴 값으로 1 값을 리턴하게 됩니다. 그러면 리턴된 데이터가  success : function(data){..} 함수의 data라는 매개변수로 값이 들어가게 됩니다. 그리고 그 매개변수로 조건문을 실행하게 되어 각 조건에 맞는 분기를 하게 됩니다. 그래서 아이디가 존재한다면 input 태그의 backgroud 색이 빨간색, 사용 할 수 있는 id인 경우 초록색으로 css를 변경하게 됩니다. 비밀번호의 경우는 jsp 파일 내에서 모두 체크를 하게 됩니다. 그래서 두번의 비밀번호의 입력이 같은 경우 input태크의 background 색이 초록색으로 변하게 됩니다. 마지막으로 닉네임 체크 같은 경우는 아이디 중복 체크와 모든 로직이 동일함으로 실시간 아이디 체크와 동일하게 코드 해석이 가능합니다.



8. 실행화면



이미 아이디가 존재하고 패스워드 두개가 다른 값을 가지며 또한, 이미 사용중인 닉네임인 경우 모든 input태그의 background 색이 빨간색으로 변함과 동시에 회원가입 버튼이 disabled가 된 것을 볼 수 있습니다.





사용가능한 아이디이며, 두개의 패스워드가 같고 또한 사용가능한 닉네임인 경우 모두 input 태그가 초록색으로 변하고 회원가입 버튼 또한 사용할 수 있게 disabled가 false로 변하게 됩니다.


9. 마치며


혹시 잘못된 점이 있으면 많은 지적부탁드립니다... 혹시 코드가 전체 필요하신 분은 댓글로 남겨주시면 확인하는 즉시 바로 보내드리겠습니다~!



저작자표시

'프로그래밍언어 > JavaScript' 카테고리의 다른 글

Javascript - Uncaught Error: Bootstrap's JavaScript requires jQuery at...에러  (0) 2019.05.14
Javascript 타이머함수( setInterval(),setTimeOut(),clearInterval() )  (0) 2018.06.02
JSON객체의 배열로 넘어온 데이터 출력하기  (0) 2018.04.28
posted by 여성게
:
Web/Spring 2018. 2. 16. 00:30

Spring(스프링) 회원가입

Spring(스프링) 회원가입


1. 개발환경


1.eclipse

2.tomcat 8.0

3.spring 4.3.7

4.oracle





2. 프로젝트 파일구조







3. 관련 라이브러리 추가.


위에서 aop weaver 같은 경우는 pointcut에 걸렸을 때, advice 메소드를 호출해 실행하는 것이 weaver 라고 합니다. 그 기능을 하기 위해 weaver 라이브러리를 등록합니다.

parser 같은 경우는 repository가 있는 경로에 한글이 낄 경우 이상한 에러(log어쩌고 저쩌고)가 뜨게 됩니다.(ex:C:\Users\윤여성\.m2\repository....) 




그래서 한글 인코딩을 하기위한 라이브러리라고 생각하면 됩니다.





4.web.xml




처음에 있는 context-param의 경우는 서블릿이 컨트롤러를 호출하게 될때, 그 컨트롤러 코드에 있는 비즈니스단의 클래스의 빈생성(UserService)을 위해 미리 preload(ContextLoaderListner이용)하는 경우입니다. 그리고 그 다음은 presentation-layer.xml 파일을 로딩하여 해석한 servlet을 생성하는 코드입니다. 마지막으로 filter는 post방식으로 넘어오는 데이터의 한글 인코딩을 위한 코드입니다.


5. presentation-layer.xml



처음의 컴포넌트 스캔은 컨트롤러에 있는 어노테이션들을 인식해 빈 생성을 하기위한 코드이고, 그 다음의 리졸버는 컨트롤러에서 리턴하는 경로의 앞과 뒤에 붙여줄 문자를 설정하는 코드입니다.





6. applicationContext.xml



mybatis를 사용하기 위한 sql세션팩토리빈 생성과 세션템플릿 설정입니다. 그 다음은 트랜잭션 매니저를 빈등록하여 txAdvice를 등록해 밑의 pointcut에 걸려있는 메소들중 에러가 날 경우 자동으로 rollback을 하여 디비에 잘못된 칼럼이 등록되는 것을 방지하는 트랜잭션 매니저입니다. 여기서 advisor가 행위를 하기 위해 아까 라이브러리에 weaver라는 라이브러리를 등록한 것 입니다.



7. sql-map-config.xml , user-mapping.xml , database.properties


sql-map-config.xml 의 첫번째 alias는 user-mapper.xml에서 파라미터타입이나 리절트타입에 사용하기 위한 설정입니다. 그러면 user-mapper.xml 에서의 코드가 훨씬 간결해지는 것을 볼 수 있습니다.



8. UserDTO, UserDAO ,UserService , UserServiceImpl 구현


인스턴스 변수를 선언해주고 각각의 getter, setter 메소드를 선언해주면 됩니다. alt+shift+s 를 통해 겟터,셋터메소드 및 toString() 메소드를 쉽게 생성할 수 있습니다.


@Repository 어노테이션을 통해 applicationContext.xml 에 있는 context:component-scan 설정에 걸려 UserDAO 빈 생성을 하게합니다. 그리고 @Autowired 를 통해 applicationContext.xml 에 있는 sqlSessionTemplate 객체의 의존주입을 컨테이너에게 맡기게 됩니다. 그리고 각 메소드에 있는 mybatis.~은 모두 user-mapper.xml에 정의 해놓은 sql 구문들을 사용하는 sqlSessionTemplate의 메소드입니다.



UserService 클래스입니다. 보시면 UserDAO에 있는 메소드들이 추상메소드로 들어간 것이 보이시죠? 즉, UserService 객체의 다형성을 이용하기 위해 인터페이스 타입으로 클래스를 생성한 것입니다.(컨트롤러에서 직접 DAO에 접근하는 것이 아니라 Service 구현 클래스를 통해 DAO에 접근한다.) 하나 팁을 주자면 UserDAO에서 alt+shift+t 를하면 extract interface라는 기능이 있습니다. 그러면 UserDAO에 들어가있는 메소드를 모두 추상메소드 타입으로 갖고 있는 인터페이스를 쉽게 생성할 수 있습니다.(UserDAO에 생기게 되는 implements UserService는 꼭 지워줄것!)



UserService 인터페이스를 상속받아 구현한 클래스입니다.



9. UserController 구현


위에 @Autowired에 UserService 인터페이스 타입으로 의존주입을 받는 이유는 유지보수 이유때문입니다. 객체지향의 다형성을 이용하게 된다면 UserServiceImpl가 변경되어도 의존주입을 하게 되는 UserService와는 상속관계가 지속되기에 별도의 컨트롤러의 코드의 변경이 없어도 되게됩니다. 그리고 login.do 와 insertUser.do 매핑 메소드에 RequestMethod를 GET과 POST 두개를 나눈 이유는 index페이지에서 로그인 혹은 회원가입 버튼을 누르게 된다면 get방식으로 요청(진짜 로그인과 회원가입 같은 경우는 post 방식으로 데이터를 서버측으로 보내게 됩니다.)이 가서 각 페이지로 이동하게 됨으로 페이지 이동을 위한 메소드는 별도의 url매핑을 만들필요 없이 같은 url매핑으로 메소드 방식만 두개로 정해주면 됩니다. 



10. insertUser.jsp



<%@ page language="java" contentType="text/html; charset=EUC-KR"
 
    pageEncoding="EUC-KR"%>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 
<html>
 
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
 
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css" rel="stylesheet">
 
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 
    <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/latest/js/bootstrap.min.js"></script>
 
    <style>
    body {
        background: #f8f8f8;
        padding: 60px 0;
    }
    
    #login-form > div {
        margin: 15px 0;
    }
 
 
 
</style>
 
<title>회원가입</title>
 
</head>
 
<body>
 
    <div class="container">
 
        <div class="col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
 
            <div class="panel panel-success">
 
                <div class="panel-heading">
 
                    <div class="panel-title">환영합니다!</div>
 
                </div>
 
                <div class="panel-body">
 
                    <form action="insertUser.do" id="login-form" method="post">
 
                        <div>
 
                            <input type="email" class="form-control id" name="id" placeholder="Email" oninput="checkId()" id="checkaa" autofocus>
 
                        </div>
 
                        <div>
 
                            <input type="password" class="form-control pass" name="pw" placeholder="Password" oninput="checkPwd()">
 
                        </div>
 
                        <div>
 
                            <input type="password" class="form-control pass" name="pwConfirm" placeholder="Confirm Password" id="repwd" oninput="checkPwd()">
 
                        </div>
 
                        <div>
 
                            <input type="text" class="form-control nickname" name="nickName" id="nickname" placeholder="Your Nickname" oninput="checkNick()" autofocus>
 
                        </div>
 
                        <div>
 
                            <button type="submit" class="form-control btn btn-primary signupbtn" disabled="disabled">회원가입</button>
 
                        </div>
 
                    </form>
 
                </div>
 
            </div>
 
        </div>
 
    </div>
 
    <script>
 
 
 
    //아이디와 비밀번호가 맞지 않을 경우 가입버튼 비활성화를 위한 변수설정
 
    var idCheck = 0;
 
    var nickCheck = 0;
 
    var pwdCheck = 0;
 
    //아이디 체크하여 가입버튼 비활성화, 중복확인.
 
    function checkId() {
 
        var inputed = $('.id').val();
 
        console.log(inputed);
 
        $.ajax({
 
            data : {
 
                id : inputed
 
            },
 
            url : "checkId.do",
 
            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");
 
                    } 
 
                } else if (data == '1') {
 
                    $(".signupbtn").prop("disabled", true);
 
                    $(".signupbtn").css("background-color", "#aaaaaa");
 
                    $("#checkaa").css("background-color", "#FFCECE");
 
                    idCheck = 0;
 
                } 
 
            }
 
        });
 
    }
 
  //재입력 비밀번호 체크하여 가입버튼 비활성화 또는 맞지않음을 알림.
 
    function checkPwd() {
 
        var inputed = $('.pass').val();
 
        var reinputed = $('#repwd').val();
 
        console.log(inputed);
 
        console.log(reinputed);
 
        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");
 
            }
 
        } else if (inputed != reinputed) {
 
            pwdCheck = 0;
 
            $(".signupbtn").prop("disabled", true);
 
            $(".signupbtn").css("background-color", "#aaaaaa");
 
            $("#repwd").css("background-color", "#FFCECE");
 
            
 
        }
 
    }
 
    //닉네임과 이메일 입력하지 않았을 경우 가입버튼 비활성화
 
    function checkNick() {
 
        var nickname = $("#nickname").val();
 
        console.log(nickname);
 
        $.ajax({
 
            data : {
 
                nickName : nickname
 
            },
 
            url : "checkNickName.do",
 
            success : function(data) {
 
                if(nickname=="" && data=='0') {
 
                    $(".signupbtn").prop("disabled", true);
 
                    $(".signupbtn").css("background-color", "#aaaaaa");
 
                    $("#nickname").css("background-color", "#FFCECE");
 
                    nickCheck = 0;
 
                } else if (data == '0') {
 
                    $("#nickname").css("background-color", "#B0F6AC");
 
                    nickCheck = 1;
 
                    if(idCheck==1 && pwdCheck == 1) {
 
                        $(".signupbtn").prop("disabled", false);
 
                        $(".signupbtn").css("background-color", "#4CAF50");
 
                    } 
 
                } else if (data == '1') {
 
                    $(".signupbtn").prop("disabled", true);
 
                    $(".signupbtn").css("background-color", "#aaaaaa");
 
                    $("#nickname").css("background-color", "#FFCECE");
 
                    nickCheck = 0;
 
                } 
 
            }
 
        });
 
    }
 
     
 
   </script>
 
</body>
 
</html>
cs




11. 마치며..


insertUser.jsp 와 UserController에 있는 코드 중 ajax를 이용한 실시간 아이디 중복체크 및 비밀번호 확인, 닉네임 체크 코드가 들어가있습니다. 그것은 별도로 따로 설명을 올리겠습니다.. 두서 없이 한 설명을 들어주셔서 감사합니다. 코드를 원하시는 분은 댓글로 남겨주시면 보내드리겠습니다.






저작자표시

'Web > Spring' 카테고리의 다른 글

Spring - Jsoup을 이용한 웹크롤링  (0) 2018.05.07
Spring AOP를 이용한 XSS 공격 방지  (1) 2018.05.06
Spring(스프링) + WebSocket(웹소켓)을 이용한 실시간 채팅  (36) 2018.04.22
Spring(스프링) 어노테이션 DI방법  (0) 2018.03.13
Spring(스프링) Transaction(트랜잭션) 범위설정  (0) 2018.03.07
posted by 여성게
:

티스토리툴바