[Spring][쇼핑몰 프로젝트][6]회원가입 유효성 검사(3)

프로젝트 Github : https://github.com/sjinjin7/Blog_Project
프로젝트 포스팅 색인(index) : https://kimvampa.tistory.com/188

목표

  회원가입 유효성 검사 완성

 

 

순서

1. 이름 유효성 검사
2. 이메일 유효성 검사
3. 인증번호 유효성 검사
4. 주소 유효성 검사
5. 최종 유효성 검사 및 전송
6. 테스트

 

 

1. 이름 유효성 검사

 회원가입 버튼 작동 메서드 내부에 아래의 코드를 추가합니다. 코드를 해석하면 이름(name) 입력란이 아무것도 입력되지 않았을 때 span 태그가 보이도록 하고 nameCheck 변수는 false를 대입합니다. 이름(name) 입력란에 입력이 되어 있다면 span 태그는 사라지게 하고 nameCheck에 true를 대입합니다.

 

 
        /* 이름 유효성 검사 */
        if(name == ""){
            $('.final_name_ck').css('display','block');
            nameCheck = false;
        }else{
            $('.final_name_ck').css('display', 'none');
            nameCheck = true;
        }
 

 

그림 1

 

 

2. 이메일 유효성 검사

 회원가입 버튼 작동 메서드 내부에 아래의 코드를 추가합니다. 코드를 해석하면 이메일(mail) 입력란이 아무것도 입력되지 않았을 때 span 태그가 보이도록 하고 mailCheck 변수는 false를 대입합니다. 이메일(mail) 입력란에 입력이 되어 있다면 span 태그는 사라지게 하고 mailCheck에 true를 대입합니다.

 

 
        /* 이메일 유효성 검사 */
        if(mail == ""){
            $('.final_mail_ck').css('display','block');
            mailCheck = false;
        }else{
            $('.final_mail_ck').css('display', 'none');
            mailCheck = true;
        }
 

 

그림 2

 

 

3. 인증번호 유효성 검사

 인증번호 입력란에 입력한 번호가 이메일로 전송한 인증번호와 일치 여부에 따라 mailnumCheck 변수가 달라지도록 해야 합니다. 기존에 이미 인증번호 비교 메서드를 만들었기 때문에 해당 메서드의 if문에서 일치할 경우는 mailnumCheck 변수에 true를 대입하고, 일치하지 않을 경우에는 false를 대입합니다.

 

 
      mailnumCheck = true;     // 일치할 경우
       mailnumCheck = false;    // 일치하지 않을 경우
 

 

그림 3

 

 

4. 주소 유효성 검사

 회원가입 버튼 작동 메서드 내부에 아래의 코드를 추가합니다. 코드를 해석하면 주소(addr) 입력란이 아무것도 입력되지 않았을 때 span 태그가 보이도록 하고 addressCheck 변수는 false를 대입합니다. 주소(addr) 입력란에 입력이 되어 있다면 span 태그는 사라지게 하고 addressCheck에 true를 대입합니다.

 

 
        /* 주소 유효성 검사 */
        if(addr == ""){
            $('.final_addr_ck').css('display','block');
            addressCheck = false;
        }else{
            $('.final_addr_ck').css('display', 'none');
            addressCheck = true;
        }
 

 

그림 4

 

 

5. 최종 유효성 검사 

 최종적으로 앞의 유효성 검사 변수들이 true가 되었는지 모두 확인합니다. 모두 true일 경우 회원가입 form을 서버에 전송합니다. 

 

- 최종 유효성 검사를 위한 if문을 작성합니다.

 

 
        /* 최종 유효성 검사 */
        if(idCheck&&idckCheck&&pwCheck&&pwckCheck&&pwckcorCheck&&nameCheck&&mailCheck&&mailnumCheck&&addressCheck ){
 
        }    
 

 

그림 5

 

 

- if문 내부에 주석 처리하였던 회원가입 form을 전송하는 코드를 삽입합니다.

 

 
            $("#join_form").attr("action", "/member/join");
            $("#join_form").submit();        
 

 

그림 6

 

 

- if문 아래에 return false를 기입하였습니다. 위의 if문에서 유효성 검사 변수들 중 단 한 개라도 false가 있을 경우 해당 코드를 읽게 되는데, 감싸고 있는 메서드(join_button click) 메서드 정상 종료되지 못할 경우를 대비해서 넣었습니다. 

 

 
    return false;    
 

 

 

 

6. 테스트

 이로써 우리가 만들고자 했던 유효성 검사를 완성했습니다. 정상적으로 작동하는지를 테스트해보겠습니다.

 

6-1 전혀 입력하지 않은 경우

 

그림 8

 

 

6-2 일부만 제대로 입력한 경우

 

그림 9

 

 

6-3 정상적으로 입력을 완료한 경우

 

그림 10

 

그림 11

 

그림 12

 

 

DATE

• 2020.12.03