전땡
98
2021-06-26 22:54:19
1
140

[회원가입 폼 구현] 이메일 중복 확인 기능 추가 문제


회원가입 폼 구현 중인데

다른 ID중복확인 기능이랑 회원가입 등 이런저런 메세지 띄우는 기능은 구현했는데

이메일 중복확인 기능 추가로 구현하려고 집어 넣었는데

되던 기능들도 막혀서 안되고 있습니다.

제가손댄 부분은 email 관련된 ajax나 유효성검사 부분만 추가했습니다.

아이디 중복확인 기능 추가할때도 이랬었는데 다시 또 이러네요

어디서부터 손봐야 할지 모르겠습니다 ㅠㅠ


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>회원가입</title>

<style type="text/css">
 @import url("https://fonts.googleapis.com/css?family=Black+Han+Sans&display=swap");

* {
	background-color: white;
	font-family: 'Black Han Sans', sans-serif;
}

form {
	border: 2px solid black;
	width: 820px;
	height: 810px;
	margin: 0px auto;
	box-shadow: 5px 5px 5px 5px gray;
}

table {
	text-align: center;
	border-collapse: separate;
	border-spacing: 0 20px;
	margin-left: 20px;
}

td {
	font-size: 30px;
}

h1 {
	margin: 0px;
	size: 1.2rem;
}

input {
	border-radius: 30px;
	border: 2px solid black;
	border-color: #3273a8;
	margin-left: 5px;
	text-align: center;
	font-size: 20px;
}

input:focus {
	border-color : red;
}

input::placeholder {
 	color: black;
 	text-align: center;
}

button {
	 width: 150px;
	 height: 40px;
	 line-height: 40px;
	 border-radius: 30px;
	 border: 2px solid black;
	 margin-left: 5px;
	 margin-top: 10px;
	 border-color: #32a875; 
	 font-size: 20px;
}

button:hover {
	border-color: #a89632;
	cursor: pointer;
}

#w_close {
	float: right;
	display: block;
}
	
#w_close button {
	border: 0px;
	color: red;
	width: 0px;
	margin-right: 0px;
	margin-top: 0px;
}

table tr:last-child td {
	font-size: 30px;
}

table tr td:last-child a {
	color: red;
}

#name, #id, #pw, #pwcheck, #email {
	width: 400px;
	height: 40px;
	line-height: 40px;
	font-size: 20px;
}

#idcheck, #emailcheck {
	height: 40px;
	line-heighta: 40px;
	width: 200px;
}

#sign_up, #cancel {
	height: 40px;
	line-height: 40px;
	margin-left: 100px;
	font-size: 20px;
}
</style>

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="js/signup.js"></script>
<script type="text/javascript">

/* ----------------------------------------------------------------- */	

$(document).ready(function() {
	
	var cnt = 0;
	var id_ok = 0;
	var pw_ok = 0;
	var email_ok = 0;
	var userid = 0;
	var useremail = 0;
	var reguserid = /^[a-z]\w{4,11}$/;
	var reguseremail = /^[a-z]\w{4,11}@[a-z]{2,10}[\.][a-z]{2,3}[\.]?[a-z]{0,2}$/;
	
	$("#idcheck").click(function() {
			userid = document.getElementById("id");
		$.ajax({
		
			url: "loginCheck.json",
			
			success: function(result) {
				$(result).each(function(key, value) {
					if ($("#id").val() == value.id) {
						alert("이미 존재합니다");
						cnt = 0;
						return false;
					}else{
						cnt++;
					}//if
				});//each
				
				//id 유효성 검사
				if (!userid.value){
					alert("아이디를 입력하세요");
					$("#id").focus();
				}else if(!reguserid.test(userid.value)){
					alert("아이디가 존재하지 않거나 입력이 잘못되었습니다.");
					$("#id").focus();
				}else if(cnt != 0){
					alert("사용할수 있는 아이디 입니다.");
					id_ok = 1;
				}//if
				
			}//success result
		});//ajax
		return false;
	});//click
	
	$("#emailcheck").click(function() {
		userid = document.getElementById("email");
	$.ajax({
	
		url: "loginCheck.json",
		
		success: function(result) {
			$(result).each(function(key, value) {
				if ($("#email").val() == value.id) {
					alert("이미 존재합니다");
					cnt = 0;
					return false;
				}else{
					cnt++;
				}//if
			});//each
			
			//email 유효성 검사
			if (!useremail.value){
				alert("이메일를 입력하세요");
				$("#email").focus();
			}else if(!reguseremail.test(useremail.value)){
				alert("이메일의 입력이나 형식이 잘못되었습니다.");
				$("#email").focus();
			}else if(cnt != 0){
				alert("사용할수 있는 이메일 입니다.");
				email_ok = 1;
			}//if
			
		}//success result
	});//ajax
	return false;
});//click
	
	$("#pw").on({
		"click" : function() {
			$("#pwCheckSpan").html("");
		},
		"keyup blur" : function() {
			if ($("#pw").val() != $("#pwcheck").val()) {
				$("#pwCheckSpan").html("일치하지 않음").css("color", "red");
				pw_ok = 0;
			} else {
				$("#pwCheckSpan").html("일치함").css("color", "blue");
				pw_ok = 1;
			}//if
		}//keyup blur
	});//pw

	$("#pwcheck").on({
		"click" : function() {
			$("#pwCheckSpan").html("");
		},
		"keyup blur" : function() {
			if ($("#pw").val() != $("#pwcheck").val()) {
				$("#pwCheckSpan").html("일치하지 않음").css("color", "red");
				pw_ok = 0;
			} else {
				$("#pwCheckSpan").html("일치함").css("color", "blue");
				pw_ok = 1;
			}//if
		}
	});//pw_chk
	
/* ----------------------------------------------------------------- */	
	
	var name_key = 0;
	var id_key = 0;
	var pw_key = 0;
	var email_key = 0;
	
	document.getElementById("signup_form").onsubmit = function() {
	
	userid = $("#id").val();//id
	useremail = $("#email").val()//email
	var username = document.getElementById("name");//name
	var userpw = document.getElementById("pw");//pw
	var userpwcheck = document.getElementById("pwcheck");//pw_check
	
	//유효성검사
	var regusername = /^[가-힣]{2,5}$/;
	var reguserpw = /^[a-z]\w{4,11}$/;
	reguserid = /^[a-z]\w{4,11}$/;
	reguseremail = /^[a-z]\w{4,11}@[a-z]{2,10}[\.][a-z]{2,3}[\.]?[a-z]{0,2}$/;
	
	alert(username.value);
	alert(userid);
	alert(userpw.value);
	alert(userpwcheck.value);
	alert(useremail);
	
	if (!username.value) {
		alert("이름을 입력하세요");
		username.focus();
		return false;
	} else if(!regusername.test(username.value)) {
		alert("이름의 입력이나 형식이 잘못되었습니다."); 
		username.focus();
		return false;
	} else {
		name_key = 1;
}//username if
	
	if (!userid) {
		alert("아이디를 입력하세요");
		$("#id").focus();
		return false;
	} else if(!reguserid.test(userid)) {
		alert("아이디 형식이 잘못되었습니다. \n" + 
		"아이디는 영문자로 시작하고 5글자에서 12글자 입니다");
	$("#id").focus();
	return false;
	} else {
		id_key = 1;
	}//userid if

	if (!userpw.value || !userpwcheck.value) {
		alert("비밀번호를 입력하세요");
		return false;
	} else if(!reguserpw.test(userpw.value) || !reguserpw.test(userpwcheck.value)) {
			alert("비밀번호 형식이 잘못되었습니다. \n" + 
						"비밀번호는 영문자로 시작하고 5글자에서 12글자 입니다");
			return false;
	}else {
		pw_key = 1;
	}//pw if
	
	if (!useremail) {
		alert("이메일을 입력하세요");
		$("#email").focus();
		return false;
	} else if(!reguseremail.test(useremail)) {
		alert("이메일의 입력이나 형식이 잘못되었습니다.);
	$("#email").focus();
		return false;
	} else {
		email_key = 1;
	}//email if
	
	//아이디 중복검사 클릭 이벤트
	$('#idcheck').click(function(){
		if(!idcheck()){
			alert('사용할 수 있는 아이디 입니다.');
		}
	});//idcheck
	
	$('#pwcheck').click(function(){
		if(!pwcheck()){
			alert('비밀번호가 일치하지 않습니다.');
		}
	});//pwcheck
	
	//이메일 중복검사 클릭 이벤트
	$('#emailcheck').click(function(){
		if(!emailcheck()){
			alert('사용할 수 있는 이메일 입니다.');
		}
	});//idcheck
	
/* ----------------------------------------------------------------- */	
	
	if(name_key == 1 && id_key == 1 && pw_key == 1 && email_key == 1) {
		if(id_ok == 1 && pw_ok == 1 && email_ok == 1){
			alert("회원가입을 축하드립니다");
			}//if ok
	}//if key
	return false;
};//#signup_form onsubmit

	document.getElementById("signup_form").onreset = function() {
		var result = confirm("정말로 회원가입을 취소하시겠습니까?");
		
		if (result) {
			id.focus();
			return false;
		} else {
			id.focus();
			return false;
		}//if
	};//onreset
	
	$("#w_close").click(function() {
		window.close()
	})//click
	
});//ready
</script>
</head>
<body>
	<div>
	<form action="#" id="signup_form" name="signup_form">
	<table>
	<tr align="right"><td colspan="3"><div id="w_close">
	<button type="button">X</button></div></td></tr>
	
		<tr align="center">
			<td colspan="3"><h1>회원 가입</h1><br></td>
		</tr>
		
		<tr>
			<td>이&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;름</td>
			<td><input type="text" name="name" id="name" 
								 placeholder="이름을 입력하세요" onclick="this.placeholder='';"/></td>
		</tr>
		<tr>
			<td>I&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;D</td>
			<td><input type="text" name="id" id="id" 
			 					 placeholder="ID를 입력하세요" onclick="this.placeholder='';"/></td>
			<td><button id="idcheck">ID중복확인</button></td>
		</tr>
		<tr>
			<td>비&nbsp;밀&nbsp;&nbsp;&nbsp;번&nbsp;호</td>
				<td><input type="password" name="pw" id="pw"
									 placeholder="비밀번호를 입력하세요" onclick="this.placeholder='';"/></td>
		</tr>
		<tr>
			<td>비밀번호확인</td>
				<td><input type="password" name="pwcheck" id="pwcheck"
									 placeholder="비밀번호를 다시 입력하세요" onclick="this.placeholder='';"/></td>
		</tr>
		
		<tr align="center">
			<td colspan="3"><span id="pwCheckSpan"></span></td>
		</tr>
		
		<tr>
			<td>이&nbsp;&nbsp;&nbsp;&nbsp;메&nbsp;&nbsp;&nbsp;&nbsp;일</td>
				<td><input type="text" name="email" id="email"
									 placeholder="이메일을 입력하세요" onclick="this.placeholder='';"/></td>
				<td><button type="button" id="emailcheck">email중복확인</button></td>
		</tr>
		<tr>
			<td>휴&nbsp;대&nbsp;&nbsp;&nbsp;전&nbsp;화</td>
				<td><input type="tel" size="7" maxlength="4"/> - <input type="tel" size="7" maxlength="4"/> - <input type="tel" size="7" maxlength="4"/>
				</td>
		</tr>
		
		<tr id="btn" style="text-align: center;">
			<td colspan="2"> 
			<button type="submit" id="sign_up">회원가입</button>
			<button type="reset" id="cancel">가입취소</button>
			</td>
		</tr>
		
		<tr align="center">
			<td colspan="3">이미 계정이 있다면 <a href="login.html">여기</a>를 클릭하여 로그인 하세요</td>
		</tr>

	</table>
</form>
</div>
</body>
</html>






















0
  • 답변 1

  • dev_jian
    128
    2021-06-27 01:20:30

    안녕하세요, 데브지안입니다.

    다름이 아니라 코드가 너무 지저분하고 html 기초, javascript 기초부터 학습하셔야 할 것 같습니다.

    우선 전체 흐름을 알 수 없어 문제가 무엇인지 정확하게는 모르지만

    한 가지 확실한 점은 299라인에 문자열이 닫히지 않아 에러가 발생합니다.

    style과 js를 분리하셔서 깔끔하게 코딩하시고 깃허브 저장소를 이용해 해당 프로젝트를 공개해주시면 다른분들이 보고 분석하기 편하실 것 같습니다.

    모쪼록 도움이 되었으면 좋겠습니다.

  • 로그인을 하시면 답변을 등록할 수 있습니다.