27.회원가입유효성검사03

회원가입 유효성검사03

순서

1.비밀번호 확인 일치 검사

2.이름 유효성 검사

3.이메일 유효성 검사

4.인증번호 유효성 검사

5.주소 유효성 검사

6.모든 유효성 검사

 

1.비밀번호 확인 일치 검사

	<span class="pwck_input_re_1">비밀번호가 일치합니다</span>
	<span class="pwck_input_re_2">비밀번호가 일치하지 않습니다</span>

일치,불일치 여부에 대한 경고글 역할이다.

• join.css

.pwck_input_re_1{
	color: green;
	display: none;
}

.pwck_input_re_2{
	color: red;
	display:none;
	
}

span태그에 css 속성을 추가한다.

비밀번호 확인 입력란에 실행되는 메서드를 추가한다.

	 /* 비밀번호 확인 일치 유효성 검사 */
			  $('.pwck_input').on("propertychange change keyup paste input", function(){
				 
				 var pw = $('.pw_input').val();
				 var pwck = $('.pwck_input').val();
				 $('.final_pwck_ck').css('display', 'none');
				
			 if(pw == pwck){				 
					$('.pwck_input_re_1').css("display", "block");
		    		$('.pwck_input_re_2').css("display", "none");		
		    		pwckcorCheck = true;
			} else {
					$('.pwck_input_re_1').css("display", "none");
					$('.pwck_input_re_2').css("display", "block");		
					pwckcorCheck = false;
				 }
				 
				 
				 
			 });  

if문을 사용하여 비밀번호 입력 값과 비밀번호 확인 입력값이 같을 경우 일치한다는 경고글이 뜨도록하고 비밀번호 확인 유효성 검사 변수인 pwckcorCheck를 true를 대입한다. 일치하지 않을 경우 경고글과 pwckcorCheck 값에 false를 대입한다.

 

2.이름 유효성 검사

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

name입력란에 아무것도 입력이 되지않을 경우 span 태그가 보인다. nameCheck 변수는 false가 된다. name입력란에 입력이 되어있다면 span태그는 사라지고 nameCheck가 true가 된다.

3.이메일 유효성 검사

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

4.인증번호 유효성 검사

	 /* 인증번호 비교 */
	 $(".mail_check_input").blur(function(){
	     
	     var inputCode = $(".mail_check_input").val();        // 입력코드    
	     var checkResult = $("#mail_check_input_box_warn");    // 비교 결과     

	     if(inputCode == code){                            // 일치할 경우
	         checkResult.html("인증번호가 일치합니다.");
	         checkResult.attr("class", "correct");
	         mailnumCheck = true;
	     } else {                                            // 일치하지 않을 경우
	         checkResult.html("인증번호를 다시 확인해주세요.");
	         checkResult.attr("class", "incorrect");
	         mailnumCheck = false;
	     }    
	     
	 });
	

인증번호 입력란에 입력한 번호가 이메일로 전송한 인증번호와 일치 여부에 따라 mailnumCheck 변수가 달라지도록 해야한다.

기존에 이미 인증번호 비교 메서드를 만들었기 때문에 해당 메서드의 if문에서 일치할 경우 mailnumCheck변수에 true를 대입하고 일치하지 않을 경우 false 를 대입힌다.

 

5.주소 유효성 검사

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

addr입력란에 아무것도 입력이 되지않을 경우 span 태그가 보인다. addressCheck 변수는 false가 된다. addr입력란에 입력이 되어있다면 span태그는 사라지고 addressCheck가 true가 된다.

 

6.모든 유효성 검사

  	     if(idCheck&&idckCheck&&pwCheck&&pwckCheck&&pwckcorCheck&&nameCheck&&mailCheck&&addressCheck){
  	    	 
  	    	 $("#joinForm").attr("action","/client-register");
  	    	$("#joinForm").submit();
  	     }
  		 
  		return false;
    		
    	});
    	
    });
    

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

if문 아래에 return를 기입한다. 한개라도 false가 있을 시 해당 코드를 읽게 된다.