[Tistory] 코드 적용 - 이메일 인증 안하면 못 넘어가게

yuzu sim's avatar
Sep 26, 2024
[Tistory] 코드 적용 - 이메일 인증 안하면 못 넘어가게

1. joinForm.mustache - script

// 이메일 인증 안되면 막기 + 비번이 다르면 form 제출 못하게 막아놓음 $("#joinForm").on("submit", function (e) { // 기본 폼 제출 막기 e.preventDefault(); // 이메일 인증 여부 확인 if (!isEmailConfirmed) { // 이메일 인증이 완료되지 않았는지를 확인 swal({ text: "이메일 인증이 필요합니다.", icon: "warning", button: "확인" }); return; // 이메일 인증이 안된 경우 폼 제출 막기 } // 패스워드 유효성 검사 let password = $("#password").val(); let confirmPassword = $("#same-password").val(); // 입력된 비밀번호(`password`)와 확인 비밀번호(`confirmPassword`)가 일치하는지 확인 if (password !== confirmPassword || confirmPassword === "") { swal({ text: "비밀번호를 확인해주세요", icon: "warning", button: "확인" }); } else { // AJAX 요청으로 폼 제출 $.ajax({ url: $(this).attr("action"), // "/join" type: $(this).attr("method"), // "POST" data: $(this).serialize(), // 폼 데이터 직렬화 success: function (response) { if (response.body === 200) { // 성공 시 메인 페이지로 리다이렉트 window.location.href = "/"; // 리다이렉트할 메인 페이지 URL } else { swal({ text: response.message || "회원가입에 실패했습니다.", icon: "warning", button: "확인" }); } }, error: function (xhr, status, error) { swal({ text: "오류가 발생했습니다. 다시 시도해 주세요.", icon: "error", button: "확인" }); } }); } });
input type="hidden" id="isEmailConfirmed" 바인딩해서 formData 를 쓰지 않아도 될 것 같음
- 비밀번호 유효성 검사를 통과한 경우, AJAX 요청을 통해 폼 데이터를 서버에 전송한다. - `$(this).attr("action")`는 폼의 `action` 속성을 가져와서 요청 URL을 설정(예: "/join") - `$(this).attr("method")`는 폼의 `method` 속성을 가져와서 HTTP 메서드를 설정(예: "POST") - `$(this).serialize()`를 사용하여 폼의 데이터를 URL 인코딩 형식으로 직렬화한다.
 
 

2. 인증 잘 되고 회원가입 잘된다.

notion image
 
Share article

Coding_study