[Spring][Project: 쇼핑몰 웹사이트][2.3] 회원가입 - 마지막 유효성 검사

이전 POST

[Spring][Project: 쇼핑몰 웹사이트][2.2] 회원가입 - 주소 찾기

---

마지막으로 회원가입버튼을 누르기 전에 모든 항목이 제대로 다 적혀있는지 확인하는 작업을 설정해보자.

목차

1. span 태그 추가

2. span태그 css 추가

3. 변수 추가

4. id 유효성 검사

5. password 유효성 검사

6. name 유효성 검사

7. email 유효성 검사

8. address 유효성 검사

9. 최종 검사

10. 테스트

---

1. span 태그  추가

각 항목에대한 경고글 역할을 할 span 태그를 추가해준다.

1-1. 미입력 경고글

<span class="id_required">id required</span>
<span class="pw_required">Password required</span>
<span class="name_required">Name required</span>
<span class="mail_required">MailAccount required</span>
<span class="addr_required">Address required</span>

그림1-2

1-2. 비밀번호 불일치 경고글

<span class="pwck_input_match">The password matches</span>
<span class="pwck_input_notMatch">The password does not match</span>

그림1-3

2. span태그 css 추가

'join.css'에 코드를 추가해준다.

/* validation */
.id_required{
	color : red;
	display: none;
}
.pw_required{
	color : red;
	display: none;
}
.name_required{
	color : red;
	display: none;
}
.mail_required{
	color : red;
	display: none;
}
.addr_required{
	color : red;
	display: none;
}

.pwck_input_match{
	color : green;
	display : none;
}
.pwck_input_notMatch{
	color : red;
	display : none;
}

3. 변수 추가

/* validation variables */
var idCk = false;			//아이디
var idDoubleCk = false;			//아이디 중복
var pwCheck = false;			//비번
var pwDoubleCk = false;			//비번 일치 확인
var nameCk = false;			//이름
var mailCk = false;			//메일
var addrCk = false;			//주소

var id = $('.id_input').val();
var pw = $('.pw_input').val();
var pwCk = $('.pwck_input').val();
var name = $('.user_input').val();
var mail = $('.mail_input').val();
var addr = $('.address_input_3').val();

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

그림3

위와 같이 변수 추가해서 항목별로 입력값을 초기화하여 변수도 선언하고, 기존 메서드 코드를 주석처리한다.

 

4. id 유효성 검사

//id 유효성검사
if(id == ""){
    $('.id_required').css('display', 'block');
    idCk = false;
}else{
    $('.id_required').css('display', 'none');
    idCk = true;
}

그림4-1

 

idDoubleCk = true;
idDoubleCk = false;

그림4-2

5. password 유효성 검사

5-1. 유효성 검사

//password 유효성검사
if(pw == ""){
    $('.pw_required').css('display', 'block');
    pwCheck = false;
}else{
    $('.pw_required').css('display', 'none');
    pwCheck = true;
}

//password doubleCheck 유효성검사
if(pwCk == ""){
    $('.pwck_input_notMatch').css('display', 'block');
    pwDoubleCk = false;
}else{
    $('.pwck_input_notMatch').css('display', 'none');
    pwDoubleCk = true;
}

그림5-1

5-2. password 일치 검사

/* passord matching 검사 */
$('.pwck_input').on("propertychange change keyup paste input", function(){
    var pw = $('.pw_input').val();
    var pwCk = $('.pwck_input').val();
    if(pw == pwCk){
        $('.pwck_input_match').css('display', 'block');
        $('.pwck_input_notMatch').css('display', 'none');
        pwDoubleCk = true;
    }else{
        $('.pwck_input_match').css('display', 'none');
        $('.pwck_input_notMatch').css('display', 'block');
        pwDoubleCk = false;
    }
});

그림5-2

6. name 유효성 검사

//name 유효성검사
if(name == ""){
    $('.name_required').css('display', 'block');
    nameCk = false;
}else{
    $('.name_required').css('display', 'none');
    nameCk = true;
}

그림6

7. email 유효성 검사

//email 유효성검사
if(mail == ""){
    $('.mail_required').css('display', 'block');
    mailCk = false;
}else{
    $('.mail_required').css('display', 'none');
    mailCk = true;
}

그림7

8. address 유효성 검사

//address 유효성검사
if(addr == ""){
    $('.addr_required').css('display', 'block');
    addrCk = false;
}else{
    $('.addr_required').css('display', 'none');
    addrCk = true;
}

9. 최종 검사

주석처리해뒀던 기존 코드를 if문을 만들어서 안에 넣는다. 혹시나 정상적으로 작동안할 경우를 대비해서 'return false'를 추가해준다.

//최종 검사
if(idCk&&idDoubleCk&&pwCk&&pwDoubleCk&&nameCk&&mailCk&&addrCk){
    $("#join_form").attr("action", "/member/join");
    $("#join_form").submit();
}
return false;

10. 테스트

[아무것도 안 적고 submit 했을 때]

그림10-1

[일부만 적고 submit 했을 때]

그림10-2

[전부 다 적고 submit 했을 때]

그림10-3

그림10-4

 

정상적으로 잘 들어감!

---

다음POST 에서 킵꼬잉

(작성중)[Spring][Project: 쇼핑몰 웹사이트][3]

 

안뇽~~~ :)