23.회원가입이메일전송03

회원가입 이메일 전송 03

5.view 유효성 검사

	<script type="text/javascript">
	

    

  $(".mail_check_button").click(function(){
        var email = $(".mail_input").val();   //입력한 이메일
        var ceBox  = $(".mail_check_input"); //인증번호 입력란
        var boxWrap = $(".mail_check_input_box"); //인증번호 입력란 박스
	     
	  
	     
	     $.ajax({
	         
	         type:"GET",
	         url:"mailCheck?email=" + email,
               success:function(data){
	             
	        
	        	 
	             //console.log("data : " + data);
	           
	       		 ceBox.attr("disabled",false); 
	             boxWrap.attr("id", "mail_check_input_box_true");
	        
	         }
	   
	     });
	     
	 });


    </script>
	    	

변경 되야하는 대상에게 쉽게 사용하기 위해서 변수를 선언하였다.

이메일 인증 입력란인 cebox가 입력이 가능하도록 속성을 변경해주는 코드를 추가한다. (성공하면 disabled 속성 해제 ) 이메일 인증 입력란의 색상이 변경 되도록 해당 태그 id 속성 값을 변경해주는 코드를 작성한다.

 

인증번호 일치 여부 검사 기능

    var code= "";

입력한 인증번호와 이메일로 전송된 인증번호에 대한 비교를 하기위해서 controller에서 받은 인증번호를 뷰에 저장하는 코드를 작성한다.

	<script type="text/javascript">
	

    

  $(".mail_check_button").click(function(){
        var email = $(".mail_input").val();   //입력한 이메일
        var ceBox  = $(".mail_check_input"); //인증번호 입력란
        var boxWrap = $(".mail_check_input_box"); //인증번호 입력란 박스
	     
	  
	     
	     $.ajax({
	         
	         type:"GET",
	         url:"mailCheck?email=" + email,
               success:function(data){
	             
	        
	        	 
	             //console.log("data : " + data);
	           
	       		 ceBox.attr("disabled",false); 
	             boxWrap.attr("id", "mail_check_input_box_true");
	             code = data;
	         }
	   
	     });
	     
	 });


    </script>
	    	

인증번호 이메일 전송 메서드 내의 ajax에 Controller부터 전달받은 인증번호를 위의 code에 저장시키는 코드를 추가한다.

<div class="form-group mail_check_wrap">
							<div class="mail_check_input_box"  id ="mail_check_input_box_false">
								 <input class="form-control mail_check_input"  disabled="disabled">
							 </div>
							  <span id="mail_check_input_box_warn"></span>
							</div>
<div class="col-sm-3">
							<div class="button mail_check_button">
								<a class="btn ms-3">인증번호</a>
							</div>
						</div>
	

mail_check_input_box_warn으로 인증번호의 일치 여부를 알려주는 경고글 역할을 할 span코드를 작성한다.

.correct{
	

	color:green;
	
}
.incorrect{
	
	color:red;
	
}

join.css안에서 correct와 incorrect 코드를 추가해준다. span 색상을 변경시킬때 사용한다

* 인증번호 비교 */
	 $(".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;
	     }    
	     
	 });

i

인증번호 입력란에 데이터를 입력한 뒤 마우스를 다른 곳으로 클릭시 실행이 된다.

편의상 변수를 선언한다.

inputCode: 사용자가 입력하는 인증번호이다.

CheckResult: span 태그

사용자가 입력한 인증번호(inputCode)와 이메일로 전송된 인증번호(code)가 일치할 경우 span태그에 인증번호가 일치한다는 문구와 correcr로 변경된다.

사용자가 입력한 인증번호(inputCode)와 이메일로 전송된 인증번호(code)가 불일치할 경우 span태그에 불일치합니다라는 문구와 incorrect로 변경된다.