[JS] 인증번호 1분에 최대 5번만 호출 - 개발자 배찌

회사에서 개발한 내용 정리하기!!

이슈사항
인증번호 전송에 대한 반복 호출 확인
- 1분 내 최대 5번만 호출되도록 수정

해결방법
js에서 제어하려고 함.
초기 인증번호 클릭 count = 0 으로 두고
setTimeout을 60초로 걸어서 60초 후에는 count 를 0으로 초기화

count가 5번이 넘어가면, alert창 띄우ㅕ return 시킴
"인증번호 전송은 1분간 최대 5번만 가능합니다.";

하지만..!
이렇게 되면 f12 개발자도구에서 count = 0;으로 넣어버리면
인증번호를 계속 받을 수 있게끔 조정할 수 있다..

결론....
인증번호 호출하는 서버단에서 count를 세어하는게 맞는 것 같다..
Js에서 제어하지 않고 Java단에서 제어하도록 수정!!



아래 코드는 js로 제어한것! (공통 유틸함수 만든것을 쪼금 포함해보았다..ㅎ)

<span id=“divMbphNo”>
	<input type=“text” placeholder=“숫자만 입력” id-“mbrMbphNo” name=“mbrMbphNo” maxlength=“11”>

	<button type=“button” class=“disabled” id=“btnAuthNoReg”>인증번호 전송</button>
	<%— 활성화 시 disabled 클래스 삭제 —%>

	<p class=“hidden”>올바른 전화번호를 입력해주세요.</p>
</span>

 

$(“#mbrMbphNo”).on({
	keyup : function(e){

		<%—- 숫자만 입력 가능 %-—>
		var keyCd = e.keyCode;
		if(keyCd > 48 && keyCd < 57){
			return true;
		} else {
			var inputVal = $(this).val();
			$(this).val(inputVal.replace(/[^0-9]/gi,’’));
			return false;
		}

		<%—- 폰 번호 체크 %-—>
		if($(this).val().length < 10){
			if(!$(“btnAuthNoReg”).hasClss(“disabled”){)				$(“btnAuthNoReg”).addClass(“disabled”);
			}
			addWarnMsg(“#divMbphNo”);
			return false;		
		} else {
			var mbrMbphNo = $(this).val();
			var check = fnCheckMbrMbphNo(mbrMbphNo);
			if(check){
				$(“btnAuthNoReg”).removeClass(“disabled”);
				removeWarnMsg(“#divMbphNo”);
			}
		}
	}
	change : function(){
		if($(this).val().length < 10){
			if(!$(“#btnAuthNoReg”).hasClass(“disabled”)){
				$(“#btnAuthNoReg”).addClass(“disabled”);
			}
			return false;
		} else {
			$(this).focus();
			if($(“#btnAuthNoReg”).hasClass(“disabled”)){
				$(“#btnAuthNoReg”).removeClass(“disabled”);
			}
		}
		if(utlf_isNullOrEmpty($(this).val())){
			if(!$(“#btnAuthNoReg”).hasClass(“disabled”)){
				$(“#btnAuthNoReg”).addClass(“disabled”);
			}
			cmmf_alert(“휴대폰 번호를 입력해주세요”);
			$(this).focus();
			return false;
		}
	}
});

<%—- 경고문구 function —-%>
function addWarnMsg(id){
	var pT = $(id);
	if(pT.find(“p.msg-error”).hasClass(“hidden”){
		pt.find(“p.msg-error”).removeClass(“hidden”	) else {
		return;
	}
};


function removeWarnMsg(id){
	var pT = $(id);
	if(!pT.find(“p.msg-error”).hasClass(“hidden”){
		pt.find(“p.msg-error”).addClass(“hidden”	) else {
		return;
	}
};

<%—- 폰 번호 검증 —-%>
function fnCheckMbrMbphNo(mbrMbphNo){
	var regExp = /^01(?:0|1|[6-9])(?:\d{3}|\d{4})\d{4}$/;
	var check = regExp.test(mbrMbphNo);
	return check;
};


<%—- 공통 유틸 함수 —-%>
function utlf_isNullOrEmpty(obj){
	if(utlf_isNull(obj)){
		return true;
	} else {
		if(typeof obj == “string”){
			if(obj.length < 1){
				return true;
			}
		}
	}
	return false;
};

function utlf_isNull(obj){
	if(typeof obj == “undefined” || obj == null){
		return true;
	}
	return false; 
};

Function cmmf_alert(message, callbackFn, svcId, data){
	var options = {};
	options.svcId = svcId;
	options.callbackFn = callbackFn;
	options.successValue = 0;
	if(typeof message == “string”){
		options.content = message;
	} else {
		if(utlf_isNull(message, table)){
			options.content = message.content;
			options.subContent = message.subContent;
		}else {
			options.title = message.title;
			options.table = message.table;
		}
	}
	options.data = data;
	options.btn = [{title:”확인”, value=0}];
	cmmf_buttonPop(options);
};

//버튼을 가진 layer팝업. 직접적인 호출 지양.
//cmmf_alert, cmmf_confirm 사용 권장.
function cmmf_buttonPop(options){
	if($(“#cmmd_default”).isActive()){
		//이미 열려있는 팝업이 있는 경우 기존 팝업 유지
		return;
	}
	var opts = $.extend({
		svcId = “DEFAULT_POP”,
		content = ”확인”,
		SuccessValue = 0,
		btn:[{title:”확인”, value=0}]
	},options);

	if(utlf_isNull(opts.title)){
		cmmf_showPop(opts);
	} else {
		if(utlf_isNull(opts.table)){
			cmmf_showTitlePop(opts);
		} else {
			cmmf_showTablePop(opts);
		}
	}
};


/**
* 메시지 Confirm 팝럽 그리기
*/
Function cmmf_showPop(options){
	if($(“#cmmd_default”).size > 0){
		$(“#cmmd_default”).remove();
	}
	var btnCnt = options.btn.length;
	if(btnCnt > 2) btnCnt = 2;
	var btnClass;
	var popContent = [];
	popContent.push(‘<div id=“cmmd_default” class=“modal”>’);
	popContent.push(‘<div class=“modal-content”>’);
	popContent.push(‘<p class=“small”> + options.contents + </p>’);	if(!utlf_isNull(options.subContent)){
		popContent.push(‘<p class=“small-xs”>’ + options.subContent + ‘</p>’);
	}
	popContent.push(‘<div class=“btn-group-inline”>’);
	for(var ii=0; ii < btnCnt; ii++){
		btnClass = (options.btn[ii].value == options.successValue) ? “btn btn-success”:”btn btn-cancel”; 
		popContent.push(‘<button type=“button” class=“‘ + btnClass + ‘”>’ + options.btn[ii].title + ’</button>’)
	}
	popContent.push(‘</div>’);
	popContent.push(‘</div>’);
	popContent.push(‘</div>’);
	$(“body”).append(popContent.join(“”));

	$(“#cmmd_default div.btn-group-inline :button”),each(function(index){
		$(this).on(“click”, function(){cmmf_callbackPop.call(options, options.btn[index].value);});
	});

	$(“#cmmd_default”).addActive();
	pubUi.scrollDisabled.preventScroll();
};