28.이메일형식유효성검사

이메일 형식 유효성 검사

올바른 이메일을 입력하고 인증번호 전송을 눌렀을 경우 인증번호가 정상적으로 보내졌다는 경고글과 인증번호의 전송이 이뤄진다.

만약 올바르지 않은 이메일이 입력 될 경우 경고글과 함께 인증번호가 전송 되지 않는다.

순서

1.span 태그 추가

2.이메일 형식 검사 메서드

3.메서드 적용

1.span 태그 추가

  <span class="mail_input_box_warn"  style= "color:red;"></span>

이메일 형식이 올바른지 여부에 대한 경고글이 뜨는 span태그를 작성한다.

2.이메일 형식 검사 메서드

			  function mailFormCheck(email){
				    var form = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
				    return form.test(email);
				}
				 

이메일 형식 검사 메소드에 자바스크립트에서 제공하는 test() 메서드를 사용한다.

주어진 문자열이 정규표현식을 만족하는지를 판별하고, 그 여부를 true 또는 false로 반환한다.

test(): 주어진 문자열이 정규 표현식을 만족하는지 판단하고 그여부를 true 또는 false로 반환한다.

이름이 mailFormCheck이고 매개변수명이 email인 메서드를 작성한다.

form인 변수를 선언하고 사용하고자 하는 정규표현식으로 초기화하고 return 코드를 추가한다.

매개변수 email이 form에 저장된 정규표현식에 부합 할 시 true, 부합하지 않을시 false를 반환한다

 

3.메서드 적용

 $(".mail_check_button").click(function(){
	     
	     var email = $(".mail_input").val();        //입력한 이메일
	     var ceBox  = $(".mail_check_input"); //인증번호 입력란
	     var boxWrap = $(".mail_check_input_box"); //인증번호 입력란 박스
	     var warnMsg = $(".mail_input_box_warn"); // 이메일 입력 경고글
	     
	     
	     if(mailFormCheck(email)){
	         warnMsg.html("이메일이 전송 되었습니다. 이메일을 확인해주세요.");
	         warnMsg.css("display", "inline-block");
	      
	     } else {
	         warnMsg.html("올바르지 못한 이메일 형식입니다.");
	         warnMsg.css("display", "inline-block");
	         return false;
	     }    
	  
	  
	     
	     $.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;
	         }
	                 
	     });
	     
	 });

인증번호 이메일 전송 메서드를 추가한다.

span태그를 사용하기 편하도록 변수를 할당한다.

mailFormCheck메서드를 제어문으로 하는 if문을 사용하여 이메일 형식 검사를 하는 코드를 작성한다.

mailFormCheck의 인자로는 인증번호 이메일 전송 메서드에서 선언한 email변수를 사용한다.

올바른 이메일 형식으로 작성된 이메일이면 mailFromCheck()가 true를 반환하여 정상적인 이메일이 보내졌다는 경고글이 뜬다.

올바르지 못한 형식의 이메일을 입력할 시에 올바르지 못하다는 경고글과 if문 다음 코드인 ajax가 실행되지 않도록 return false를 작성하여 인증번호 이메일 전송 메소드를 벗어난다.