<ul>
<li>휴대전화번호</li>
<li>
<input type="text" name="phone_number" id="phone_number" placeholder="- 없이 번호를 입력해 주세요." maxlength="11" onkeyup="onlyNumber(this)">
<button type="button" id="btn_sendsms_authNumber" onclick="fn_sendsms_authNumber();">인증번호 받기</button>
</li>
<li>
<input type="text" name="auth_number" id="auth_number" placeholder="인증번호를 입력해주세요." maxlength="6" onkeyup="onlyNumber(this)">
<button type="button" class="btn-consult_address" onclick="fn_checksms_authNumber();">인증하기</button>
</li>
<li><div id="input_timer"></div></li>
</ul>
<input type="hidden" name="authentication_yn" id="authentication_yn" value="">
<script type="text/javascript">
function onlyNumber(obj){
obj.value = obj.value.replace(/[^0-9]/g,"");
}
function fn_buttonDisabled(){
//인증번호받기 버튼 누른 후 10초동안 버튼 비활성화
document.getElementById("btn_sendsms_authNumber").disabled=true;
setTimeout(function(){
document.getElementById("btn_sendsms_authNumber").disabled=false;
},10000);
}
//카운트 다운 js 시작
var countDown = 60 * 3; //3분?
var myTimer;
function fn_countDown(){
myTimer = setInterval(alertFunc,1000);
}
function alertFunc(){
var min = countDown / 60;
min = Math.floor(min);
var sec = countDown - (60 * min);
//console.log("min : sec = "+min+":"+sec);
if(min.toString().length == 1){
min="0"+min;
}
if(sec.toString().length == 1){
sec="0"+sec;
}
//화면에 보여지는 부분
document.getElementById("input_timer").innerHTML = "남은 시간 : "+min + ":"+sec;
if(countDown == 0){ //카운트다운 종료 시
clearInterval(myTimer);
}
countDown--;
var authentication_yn = document.getElementById("authentication_yn").value; //카운트다운 중 인증이 끝나서 종료
if(authentication_yn != ''){
clearInterval(myTimer);
document.getElementById("input_timer").innerHTML = "";
return;
}
if(min == 0 && sec == 0 ){
//console.log("3분 종료");
clearInterval(myTimer);
document.getElementById("input_timer").innerHTML = "";
document.getElementById("phone_number").value = "";
}
}
//카운트 다운 js 종료
function fn_duplicatePhoneCheck(phoneNumber){
var checkResult = 0;
//핸드폰 번호 중복체크 ajax
return checkResult;
}
//문자로 난수6자리 발송 ajax
function fn_sendsms_authNumber(){
var phoneNumber = document.getElementById("phone_number").value;
if(phoneNumber.length != 11){
alert("휴대전화 번호 11자리를 확인해주세요.");
return;
}
var result = fn_duplicatePhoneCheck(phoneNumber);
if(result > 0){
//중복이다.
return;
}
$.ajax({
cache : false,
url : '/step1?phoneNumber='+phoneNumber,
type:'GET',
success : function(Data){
if(문자발송 성공){
fn_buttonDisabled();
fn_countDown(); //3분 카운트다운 시작
}
}
});
}
//문자 발송한 난수와 사용자가 입력한 인증번호 맞는지 확인
function fn_checksms_authNumber(){
var phoneNumber = document.getElementById("phone_number").value;
if(phoneNumber.length != 11){
alert("휴대전화 번호 11자리를 확인해주세요.");
return;
}
//인증번호 6자리가 맞는지 학인
var authNumber = document.getElementById("auth_number").value;
if(authNumber.length != 6){
alert("인증번호 6자리를 확인해주세요.");
return;
}
$.ajax({
cache : false,
url : '/step2?phoneNumber='+phoneNumber+'&authNumber='+authNumber,
type:'GET',
success : function(Data){
if(인증성공){
document.getElementById("authentication_yn").value = "Y";
}else if(인증실패){
document.getElementById("authentication_yn").value = "N";
}
});
}
</script>
반응형
'차근차근 > JAVA Script' 카테고리의 다른 글
form 안에 데이터 전체 확인하기 (0) | 2023.01.30 |
---|---|
swiper , tap (0) | 2023.01.20 |
html태그까지 복사하기(javascript clipboard + html tag) (0) | 2022.10.19 |
동적 셀렉트 박스 추가 삭제 (0) | 2022.09.19 |
input type file.. 여러 건 업로드 (2) | 2022.09.16 |