![[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