이번에는 회원가입시 꼭 필요한 유효성 검사입니다.


간단하게 공백 시 alert메시지를 띄우는 것만 하겠습니다. 


저도 아직 정규표현식은 ... 구글링을 통해 하는지라.. 




우선 유효성 검사를 위해 다음과 같이 스크립트를 추가합니다.

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
function DosignUp() {
    
    var userid = $("#userid").val();
    var userpwd = $("#userpwd").val();
    var inputPwdCfm = $("#signUpUserPwdCfm").val();
    var username = $("#username").val();
    var email = $("#email").val();
    var addr1 = $("#addr1").val();
    var addr2 = $("#addr2").val();
    var addr3 = $("#addr3").val();
    
    if(userid.length == 0){
        alert("아이디를 입력해 주세요"); 
        $("#userid").focus();
        return false;
    }
    
    if(userpwd.length == 0){
        alert("비밀번호를 입력해 주세요"); 
        $("#userpwd").focus();
        return false;
    }
 
    if(userpwd != inputPwdCfm){
        alert("비밀번호가 서로 다릅니다. 비밀번호를 확인해 주세요."); 
        $("#signUpUserPwd").focus();
        return false; 
    }
 
    if(username.length == 0){
        alert("이름을 입력해주세요");
        $("#username").focus();
        return false;
    }
    
    if(email.length == 0){
        alert("이메일을 입력해주세요");
        $("#email").focus();
        return false;
    }
    
    if(addr1.length == 0 || addr2.length == 0 || addr3.length == 0 ){
        alert("주소를 입력해주세요");
        $("#addr3").focus();
        return false;
    }
    
    if(confirm("회원가입을 하시겠습니까?")){
        alert("회원가입을 축하합니다");
        return true;
    }
    
}
cs



1
2
<input type="submit" class="btn btn-lg btn-success btn-block" value="회원가입" onclick="DosignUp();" />
 
cs


회원가입 제출 버튼에 type="submit" 으로 변경해주세요 .


onclick="DosignUp(); 추가해주세요


보통 화면단에서 이렇게 유효성 검사를 1차로 진행한 후 , 자바단(스프링) validation 으로 다시 처리를 하고 

DB단 에서 한번 더 유혀성 검사를 하는 것으로 알고 있는데 ?? 맞나요 ?? 실무자님 계시면 댓글좀 ㅠㅠ


스프링에서 validation을 사용하는 것은 이후 시간이 있으면 포스팅 하겠습니다. 

DB단은 저도 잘 ;;    :D 모르겟어요 ㅎㅎ 누가 좀 알려주세요 ㅎㅎㅎㅎ


다음 글은 AJAX를 활용해서 아이디 중복 검사를 해보겠습니다. ㅎㅎㅎㅎ

저작자표시 비영리

'프레임워크 > SpringFrameWork' 카테고리의 다른 글

6. 스프링 기본 게시판 만들기(리스트출력하기)  (3) 2018.02.13
5. ajax를 활용하여 아이디 중복체크 하기  (43) 2018.02.08
3. spring 다음 주소API를 활용하여 우편번호 및 주소 찾기  (0) 2018.02.07
2. 회원가입 암호화 하는방법2  (0) 2018.02.07
1. Spring 회원가입하기  (4) 2018.02.06

우선 http://postcode.map.daum.net/guide 여기 들어가시면

 자세하게 다음에서 사용 방법까지 친절하게 설명해주고 있습니다. 

 회원 가입시에 우편번호,주소 외에 추가로 요구되는 사항이 있으면 확인하시어 변경하시면 되겠습니다.



우선 지금까지 작성하신 회원가입에서 코드를 추가하겠습니다. ~ 기본 회원가입, 비밀번호 암호화를 익시히고 

오시면 되겠습니다.~


Signup.JSP에서 


1
<script src="http://dmaps.daum.net/map_js_init/postcode.v2.js"></script>
<script src="/resources/js/addressapi.js"></script>
cs

스크립트를 추가합니다.


저같은경우엔 js파일을 따로 빼서 불러왔습니다.~

<script src="/resources/js/addressapi.js"></script> 이부분은 선택 사항입니다.


이제 주소에 해당하는 form을 수정하겠습니다.


1
2
3
4
5
6
7
8
9
10
<div class="form-group">                   
<input class="form-control" style="width: 40%; display: inline;" placeholder="우편번호" name="addr1" id="addr1" type="text" readonly="readonly" >
    <button type="button" class="btn btn-default" onclick="execPostCode();"><i class="fa fa-search"></i> 우편번호 찾기</button>                               
</div>
<div class="form-group">
    <input class="form-control" style="top: 5px;" placeholder="도로명 주소" name="addr2" id="addr2" type="text" readonly="readonly" />
</div>
<div class="form-group">
    <input class="form-control" placeholder="상세주소" name="addr3" id="addr3" type="text"  />
</div>
cs


우편번호 검색 버튼을 만들고 onclick="execPostCode(); 이벤트 버튼을 추가해주세요  각각 id=addr1를 부여하고


다음에서 제공하는 


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
function execPostCode() {
         new daum.Postcode({
             oncomplete: function(data) {
                // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
 
                // 도로명 주소의 노출 규칙에 따라 주소를 조합한다.
                // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
                var fullRoadAddr = data.roadAddress; // 도로명 주소 변수
                var extraRoadAddr = ''; // 도로명 조합형 주소 변수
 
                // 법정동명이 있을 경우 추가한다. (법정리는 제외)
                // 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
                if(data.bname !== '' && /[동|로|가]$/g.test(data.bname)){
                    extraRoadAddr += data.bname;
                }
                // 건물명이 있고, 공동주택일 경우 추가한다.
                if(data.buildingName !== '' && data.apartment === 'Y'){
                   extraRoadAddr += (extraRoadAddr !== '' ? ', ' + data.buildingName : data.buildingName);
                }
                // 도로명, 지번 조합형 주소가 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
                if(extraRoadAddr !== ''){
                    extraRoadAddr = ' (' + extraRoadAddr + ')';
                }
                // 도로명, 지번 주소의 유무에 따라 해당 조합형 주소를 추가한다.
                if(fullRoadAddr !== ''){
                    fullRoadAddr += extraRoadAddr;
                }
 
                // 우편번호와 주소 정보를 해당 필드에 넣는다.
                console.log(data.zonecode);
                console.log(fullRoadAddr);
                
                
                $("[name=addr1]").val(data.zonecode);
                $("[name=addr2]").val(fullRoadAddr);
                
                /* document.getElementById('signUpUserPostNo').value = data.zonecode; //5자리 새우편번호 사용
                document.getElementById('signUpUserCompanyAddress').value = fullRoadAddr;
                document.getElementById('signUpUserCompanyAddressDetail').value = data.jibunAddress; */
            }
         }).open();
     }
cs


고대로~ 복사 하여 붙여넣기하고 제가 수정한 부분은 이부분입니다.

 $("[name=addr1]").val(data.zonecode);
 $("[name=addr2]").val(fullRoadAddr);


저는 이렇게 처리를 하였는데 


1
2
3
// 우편번호와 주소 정보를 해당 필드에 넣는다.
document.getElementById('sample3_postcode').value = data.zonecode; //5자리 새우편번호 사용
document.getElementById('sample3_address').value = fullAddr;
cs


다음에서 제공하는 코드에는 이런식으로 작성 되어있을 것입니다.

// 우편번호와 주소 정보를 해당 필드에 넣는다.
document.getElementById('addr1').value = data.zonecode; //5자리 새우편번호 사용
document.getElementById('addr2').value = fullAddr;


요런식으로 바꿔주면 되겠죠 ??ㅎㅎ  끝입니다.  처음엔 데이터베이스에 테이블을 생성해야하나, 

컬럼이 30개가 넘는걸 어떻게 다 만들어서 넣지 ㅠㅠ 엄청 고민했던 기억이 있네요 ㅎㅎㅎ


다른곳에서도 api를 제공하겠지만 , 저는 안해봐서 모르겠어요 ㅎㅎ 다음이 처음이자 마지막?ㅎㅎㅎ

사이트 들어가시면 초보자도 쉽게 이해 할 수있게 예제를 잘 만들어 뒀으니 ~ 활용해보시기 바랍니다.




우편 번호와 , 주소는 readonly처리하면 더 확실 하겠습니다~ ㅎㅎ 


다음엔 회원가입시  유효성검사 validation 를 하겠습니다~ 

저작자표시 비영리

'프레임워크 > SpringFrameWork' 카테고리의 다른 글

5. ajax를 활용하여 아이디 중복체크 하기  (43) 2018.02.08
4. 스프링 회원가입 유효성검사  (2) 2018.02.07
2. 회원가입 암호화 하는방법2  (0) 2018.02.07
1. Spring 회원가입하기  (4) 2018.02.06
spring 회원가입 비밀번호 암호화하여 DB에 저장하기  (0) 2018.01.11

우선 메인 화면에는 각 기능을 구현 할 링크를 만들겠습니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Main</title>
</head>
 
<body>
 
<div class="container">
  <h3>회원가입</h3>
  <a href="/signup/signup.do" class="btn btn-primary">회원가입</a>
</div>
 
</body>
</html>
cs


요런식으로 계속 기능을 만들어 갈 예정입니다.



메인 페이지 매핑  @RequestMapping("/main.do")


1
2
3
4
5
6
7
8
9
10
@Controller
public class MainController {
    
        //메인 GET 공통
        @RequestMapping("/main.do")
        public String main() {
            return "main";
        }
}
 
cs



앞으로 버튼을 계속 추가하여 기능 구현을 하는게 목표입니다.


우선 회원가입을 위해 Table 을 생성하겠습니다.

1
2
3
4
5
6
7
8
9
10
11
12
create table tbl_member(
    userid varchar(50) not null,
    userpwd varchar(100) not null,
    username varchar(50) not null,
    email varchar(100) not null,
    addr1 varchar(50),
    addr2 varchar(100),
    addr3 varchar(100),
    rdate timestamp default now(),
    updatedate timestamp default now(),
    primary key (userid)
);
cs


SignupVO 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
public class SignupVO {
 
    private String userid;
    
    private String userpwd;
    
    private String username;
    
    private String email;
    
    private String addr1;
    private String addr2;
    private String addr3;
    
    private Date rdate;
    
    private Date updatedate;
 
    //getter/setter ..
cs


회원가입 폼은 저와 동일하게 만들어주세요 디자인은 따로 다루지 않겠습니다.

이번엔는 아이디 중복확인, 우편번호 찾기는 구현하지 않겠습니다. 

이후에 구현 예정이니 폼은 동일하게 만들어 주세요.


회원가입 Controller

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
@Controller
@RequestMapping("/signup/*")
public class SingupController {
    
    @Inject
    private SignupService signupService;
    
    //SignUp GET
    @RequestMapping(value="/signup.do", method=RequestMethod.GET)
    public void signupGET() {
        
    }
    
    //SignUp PSOT
        @RequestMapping(value="/signup.do", method=RequestMethod.POST)
        public String signupPOST(SignupVO signVO) {
            
            signupService.insertMember(signVO);
            
            return "main";
        }
    
    
    
}
cs


회원가입 Service Interface

1
2
3
4
5
6
7
public interface SignupService {
 
    //회원가입 Service
    public void insertMember(SignupVO signVO);
 
    
}
cs


회원가입 ServiceImpl

1
2
3
4
5
6
7
8
9
10
11
@Service
public class SignupServiceImpl implements SignupService {
 
    @Inject
    private SignupDAO dao;
 
    @Override
    public void insertMember(SignupVO signVO) {
        dao.insertMember(signVO);
    }
}
cs


회원가입 DAO Interface

1
2
3
4
5
public interface SignupDAO {
    //회원가입 DAO
    public void insertMember(SignupVO signVO);
 
}
cs


회원가입 DAOImpl

1
2
3
4
5
6
7
8
9
10
11
12
@Repository
public class SignupDAOImpl implements SignupDAO {
 
    @Inject
    private SqlSession session;
 
    @Override
    public void insertMember(SignupVO signVO) {
        session.insert("insertMember",signVO);
    }
}
 
cs


회원가입 xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
    <insert id="insertMember" parameterType="com.sjh.signup.SignupVO">
        INSERT INTO tbl_member(
            userid,
            userpwd,
            username,
            email,
            addr1,
            addr2,
            addr3
        )VALUES(
            #{userid},
            #{userpwd},
            #{username},
            #{email},
            #{addr1},
            #{addr2},
            #{addr3}
        )
    </insert>
cs


이렇게 작성하고 내용을 넣겠습니다 . 아직 아이디중복확인 및 비밀번호 확인은 구현하지 않았습니다.~


데이터 베이스를 확인하면 ~ 짠 잘 들어 갔습니다.~


다음에는 비밀번호 암호화하여 저장하기, Daum 주소 API를 사용하여 우편번호 및 주소 찾기를 해보겠습니다.~


저작자표시 비영리

'프레임워크 > SpringFrameWork' 카테고리의 다른 글

5. ajax를 활용하여 아이디 중복체크 하기  (43) 2018.02.08
4. 스프링 회원가입 유효성검사  (2) 2018.02.07
3. spring 다음 주소API를 활용하여 우편번호 및 주소 찾기  (0) 2018.02.07
2. 회원가입 암호화 하는방법2  (0) 2018.02.07
spring 회원가입 비밀번호 암호화하여 DB에 저장하기  (0) 2018.01.11

+ Recent posts

티스토리툴바