안녕하세요. 항상 도움을 받고 있습니다. 감사합니다. 제가 로그인 폼에서 이메일과 인증번호를 입력해서 로그인이 되게 수정을 했습니다. 이메일을 입력하고 인증번호 발송 버튼을 클릭하면 값을 ajax 로 넘겨줘서 이메일을 비교해서 랜덤으로 인증번호를 생성해서 이메일으로 발송해야 합니다. 그리고 아래에 5분 동안 타이머를 재는 코드를 추가해주었습니다. 그런데 위의 이메일 검사하는 코드는 실행이 되지 않습니다. 왜 그런지 알려 주실 수 있으실까요?
<div class="form-group has-feedback">
<label for="mb_email"><b>이메일</b><strong class="sound_only"> 필수</strong></label>
<div class="input-group">
<input type="text" name="mb_email" id="mb_email" value="" required class="form-control input-sm" size="20" maxLength="50">
<span class="input-group-btn">
<button type="button" class="btn btn-color" id="sendVerificationCode" onclick="sendVerificationCode()">인증번호 발송</button>
</span>
</div>
<div id="errorText" class="text-danger"></div> <!-- 오류 메시지를 표시할 영역 -->
</div>
<div class="form-group has-feedback">
<label for="login_email"><b>인증번호</b><strong class="sound_only"> 필수</strong></label>
<div class="input-group">
<input type="number" name="mb_certification_number" id="mb_certification_number" required class="form-control input-sm" size="20" maxLength="20">
<span class="input-group-btn">
<button type="submit" class="btn btn-color" onclick="checkVerificationCode()">인증번호 확인</button>
</span>
</div>
<div id="codeErrorText" class="text-danger"></div> <!-- 오류 메시지를 표시할 영역 -->
<span class="timer" id="timer"></span> <!-- 타이머 시간을 표시할 영역 -->
</div>
<script>
function sendVerificationCode() {
var idInput = document.getElementById("login_id");
var emailInput = document.getElementById("mb_email");
var passwordInput = document.getElementById("login_pw");
var idValue = idInput.value.trim();
var emailValue = emailInput.value.trim();
var passwordValue = passwordInput.value.trim();
var errorText = document.getElementById("errorText");
if (idValue === "" || passwordValue === "") {
errorText.textContent = "아이디와 비밀번호를 입력해주세요.";
return; // 아이디나 비밀번호가 입력되지 않으면 함수 종료
} else if (emailValue === "") {
errorText.textContent = "이메일을 입력해주세요.";
return; // 이메일이 입력되지 않으면 함수 종료
}
// AJAX 요청
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
var response = xhr.responseText;
var errorText = document.getElementById("errorText");
if (response === "id_not_found") {
errorText.textContent = "잘못된 아이디나 비밀번호입니다.";
}else if (response === "email_not_found") {
errorText.textContent = "이메일을 다시 입력해주세요.";
} else if (response === "success") {
errorText.textContent = "인증번호가 발송되었습니다.";
} else {
errorText.textContent = "오류가 발생했습니다. 다시 시도해주세요.";
}
console.log(response); // 수정된 부분
}
}
};
xhr.open("POST", "login_sendVerificationCode.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("login_id=" + encodeURIComponent(idValue) + "&mb_email=" + encodeURIComponent(emailValue));
return false;
}
</script>
<script>
var timer = null;
var isRunning = false;
$("#sendVerificationCode").on("click", function() {
var display = $("#timer");
// 유효시간 설정
var leftSec = 300;
// 타이머 실행 시에 버튼 비활성화
if (!isRunning) { // 타이머가 실행 중이지 않은 경우에만
$("#sendVerificationCode").prop("disabled", true); // 버튼 비활성화
startTimer(leftSec, display);
}
});
function startTimer(count, display) {
var minutes, seconds;
timer = setInterval(function () {
minutes = parseInt(count / 60, 10);
seconds = parseInt(count % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.html(minutes + ":" + seconds);
// 타이머 끝
if (--count < 0) {
clearInterval(timer);
display.html("인증시간이 초과되었습니다.");
$("#sendVerificationCode").prop("disabled", true); // 타이머 종료 후 버튼 비활성화
isRunning = false;
}
}, 1000);
isRunning = true;
}
</script>
답변 1개 / 댓글 1개
수정 해드렸습니다.
function sendVerificationCode(){
var emailInput = document.getElementById("mb_email");
var emailValue = emailInput.value.trim();
var errorText = document.getElementById("errorText");
if(emailValue === ""){
errorText.textContent = "이메일을 입력해주세요.";
return;
}
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState === XMLHttpRequest.DONE){
if(xhr.status === 200){
var response = xhr.responseText;
if(response === "email_not_found"){
errorText.textContent = "이메일을 다시 입력해주세요.";
}else if(response === "success"){
errorText.textContent = "인증번호가 발송되었습니다.";
}else {
errorText.textContent = "오류가 발생했습니다. 다시 시도해주세요.";
}
}
}
};
xhr.open("POST", "login_sendVerificationCode.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("mb_email=" + encodeURIComponent(emailValue));
return false;
}
답변에 대한 댓글 1개
답변을 작성하려면 로그인이 필요합니다.