![[Tistory] 코드 적용 - 이메일 인증 안하면 못 넘어가게](https://image.inblog.dev?url=https%3A%2F%2Finblog.ai%2Fapi%2Fog%3Ftitle%3D%255BTistory%255D%2520%25EC%25BD%2594%25EB%2593%259C%2520%25EC%25A0%2581%25EC%259A%25A9%2520-%2520%25EC%259D%25B4%25EB%25A9%2594%25EC%259D%25BC%2520%25EC%259D%25B8%25EC%25A6%259D%2520%25EC%2595%2588%25ED%2595%2598%25EB%25A9%25B4%2520%25EB%25AA%25BB%2520%25EB%2584%2598%25EC%2596%25B4%25EA%25B0%2580%25EA%25B2%258C%26logoUrl%3Dhttps%253A%252F%252Finblog.ai%252Finblog_logo.png%26blogTitle%3DCoding_study&w=2048&q=75)
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. 인증 잘 되고 회원가입 잘된다.

Share article