전자정부 프레임워크로 회원가입 기능 구현하기 - 휴대폰 번호, 성별, 이메일 수신여부, SMS 수신여부 유효성 검사

저번시간에 비밀번호, 비밀번호 확인, 이메일 유효성 검사를 진행하였다.

(2019/05/02 - [웹 개발/EgovFramwork] - 전자정부 프레임워크로 회원가입 기능 구현하기 - 비밀번호 유효성, 이메일 유효성 검사)

 

이번시간에는 휴대폰 번호, 성별, 이메일 수신여부, SMS 수신여부 유효성 검사를 진행할 것이다.

 

 

 

 

 

소스코드

---

다운받은 jquery.alphanum.js를 공통 js 폴더에 추가

 

<!-- alphanum -->
<script type="text/javascript" src="<c:url value='/common/js/jquery.alphanum.js'/>"></script>

<div class="col-sm-1">
	<input type="text" data-name="휴대폰" class="form-control phoneNum" id="middlePhoneNum" 	name="middlePhoneNum"> 
</div>
<div class="col-sm-1">
	<input type="text" data-name="휴대폰" class="form-control phoneNum" id="lastPhoneNum" 	name="lastPhoneNum">
</div>

비밀번호 유효성 검사 같은 경우 aphpanum.js 플러그인을 다운 받아 이용하였다.

(다운받은 alphanum.js 플러그인을 head 태그에 추가)

 

또한 휴대폰 input 태그를 타겟으로 잡기위해 휴대폰 번호를 입력하는 input 태그의 class 속성에

"phoneNum" 값을 추가시켰다.

 

alphanum.js를 통해 휴대폰 번호를 입력하는 input 박스에 숫자 외의 다른 데이터를 입력할 수 없도록 할 수 있다.

alphanum.js의 사용법과 플러그인 다운로드 정보는 아래의 링크를 통해 얻을 수 있다.

(https://github.com/KevinSheedy/jquery.alphanum)

 

 

var joinMbrInput = {
    			
    		joinSubmitFn	: function() {
    			
    			if (!this.pwdChkFn()) {
    				return false;
    			} else if (!this.emailChkFn()) {
    				return false;
    			} else if (!this.genderChkFn()) {
    				return false;
    			} else if (!this.radioChkFn()) {
    				return false;
    			}
    			
    			alert("유효성 검사 완료!");
    		},
    		
    		// 아이디 중복확인 체크
        	duplicateChkFn	: function() {
        		var loginId = $("#loginId").val();
        		
        		// 아이디 유효성 검사
        		if (!this.idValidChkFn(loginId)) {
        			
        			return false;
        		}
        		
        		// 아이디 중복 체크
        		$.ajax({
        			type	:	"get",
        			url		:	"",
        			data	:	{"loginId" : loginId},
       				async	:	false,		// 동기처리
       				
       				success	: function(data) {
       					var dupCnt = parseInt(data);
       					
       					// 공통 팝업 띄우기
       					if (dupCnt > 0) {
       						alert(loginId + "은/는 사용할 수 없습니다.");
       					} else {
       						alert(loginId + "은/는 사용 가능합니다.");
       					}
       				} 			
        		})
        	},	
    			
    		// 아이디 유효성 체크
        	idValidChkFn	: function(loginId) {   		
				var	reg		= /^(?=.*[a-zA-Z])(?=.*[0-9]).{8,12}$/;
			
				if (!reg.test(loginId))	{
					
					alert("아이디가 유효하지 않습니다");
					
					return false;
				}
			
				return true;	
        	},
        	
        	// 비밀번호 유효성 체크
        	pwdChkFn	: function() {
        		var reg 	  		= /^(?=.*[a-zA-Z])(?=.*[!@#$^*+=-])(?=.*[0-9]).{8,15}$/,
        			$password 		= $("#password"),
        			$passwordCheck 	= $("#passwordCheck");
        		
        		if (!reg.test($password.val())) {       			        			
        			alert("비밀번호는 영문/숫자/특수문자 포함 8~15 자리 입력해 주세요.");
        			
        			return false;
        		}
				
        		// 비밀번호 확인
        		if ($password.val() !== $passwordCheck.val()) {					
					alert("비밀번호가 일치하지 않습니다. 일치하게 입력해 주세요.");
        			
        			return false;
        		}
        		
        		return true;
        	},
        	
        	// 이메일 유효성 체크
        	emailChkFn	: function() {
        		var reg    = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i,
        			$email = $("#email");
				
        		if (!reg.test($email.val())) {				
					alert("이메일 형식에 맞게 입력해 주세요.");
        			
        			return false;
        		}
        		
        		return true;
        	},
        	
        	// 휴대폰 번호 외 입력 차단
        	phoneChkFn	: function() {
        		// 휴대폰 유효성 체크
        		var $num = $(".phoneNum");
        		
        		$num.numeric("positiveInteger");
        		
        		$num.keyup(function() {
        			var $this = $(this);
        			
        			if ($this.val().length > 4) {
        				$this.val($this.val().substring(0,4));
        			}
        		})
        	},
        	
        	// 성별 유효성 체크
        	genderChkFn	: function() {
        		var gender = $("#gender").val();
        		
        		if (gender !== "M" && gender !== "F") {                   
                    alert("성별을 선택해 주세요.");
        			
        			return false;
        		}
        		
        		return true;
        	},
        	
        	// 라디오버튼 유효성 체크
        	radioChkFn	: function() {
        		var radioChkCnt = 0;
        		
        		$("#joinFrm").find("div.emailRadio, div.phoneRadio").each(function() {
        		
        			if (!$(this).find("[type=radio]").is(":checked")) {
        				radioChkCnt++;
                        
        				alert("수신여부 동의를 체크해주세요.");
                        
        				return false;
        			}
        		})
        		
        		if (radioChkCnt > 0)
        			return false;
        		
        		return true;
        	}
    	}
    	
    	$(function() {
    		// 휴대폰 번호 외 입력 차단
    		joinMbrInput.phoneChkFn();
    		
    	})

 

기존의 joinMbrInput 객체에 phoneChkFn, genderChkFn, radioChkFn 메소드를 추가하였고 joinSubmitFn 에 유효성 검사 로직을 추가하였다.

또한 도큐먼트레디 안에서 phoneChkFn 메소드를 호출하여 휴대폰번호 input 태그 내의 숫자를 제외한 다른 입력을 차단시켰다. (alphanum.js를 이용)

(추가로 휴대폰번호의 길이가 4 초과 시 substring 메소드를 사용해 그 뒤에 적힌 번호는 잘라내었다.) 

 

 

 

실행결과

---

1. 이메일 수신여부 라디오버튼을 클릭하지 않을 경우

 

2. SMS 수신여부 라디오버튼을 클릭하지 않을 경우

 

3. 모든 값을 알맞게 넣은 후 Sign in 버튼을 클릭 할 경우

 

 

 

마무리

---

 

위의 두가지 경우와 같이 아직 빈값 유효성 검사를 진행하지 않았기 때문에 휴대폰 번호를 입력하지 않고 Singn in 버튼을 클릭하더라도 유효성 검사를 빠져나간다.

또한 입력값에 " " (공백) 이 들어가도 문제 없이 유효성 검사를 빠져나간다.

 

다음 시간에는 이러한 빈값 유효성 검사를 진행할 것이다