21.01.21 JSPCommunity 프로젝트(ajax활용 아이디 중복체크 기능 추가, 메인화면 템플릿 적용)

2021. 1. 21. 17:58JAVA/JSP Community 사이트 프로젝트

<doJoinForm.jsp>

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<c:set var="pageTitle" value="신규 회원 가입" />
<%@ include file="../../part/head.jspf"%>
<h1>${pageTitle}</h1>

<script>
	
	//변수명과 함수명이 같으면 에러발생!!
	let checkedDupId = "";
	
	
	// 중복체크
	function checkDupId(el){
		//가장 근접한 'form'을 가져오기
		//$(el).parent.parent.parent 방식으로 부모를 찾아도 됨
		const form = $(el).closest('form').get(0);
		
		const loginId = form.loginId.value;
		
		
		//ajax 통신으로 보내고 데이터 받기
		$.get(
			'getLoginIdDup',  //요청할 주소
			{		
				//	loginId:loginId도 맞다
				// 최신 JS에서는 이 방식이 가능함
				loginId:loginId
			},
			function(data){
				if( data.code.substring(0,2) == "S-"){
					alert(data.msg + " (" + data.code + ")");
					checkedDupId = data.loginId;
				
				}
				else{
					alert(data.msg + " (" + data.code + ")");
				//	alert();
				}
			},			
			'json'
		
		);
		
	};


	
	// 폼 공백 체크
	function check(form) {
	
		if (form.loginId.value.trim().length == 0) {
			alert("ID를 입력해주세요.");
			form.loginId.focus();
			
			return;
		}
		
		if (form.loginId.value != checkedDupId) {
			alert("먼저 ID 중복 검사를 해주세요.");
			form.dupIdCheck.focus();
			
			return false;
		}
		
		if (form.loginPw.value.trim().length == 0) {
			alert("PW를 입력해주세요.");
			form.loginPw.focus();
			
			return;
		}
		if (form.loginPw.value != form.loginPwConfirm.value) {
			alert("PW가 일치하지 않습니다. PW를 확인해 주세요.");
			form.loginPwConfirm.focus();
			
			return;
		}
		
		if (form.name.value.trim().length == 0) {
			alert("이름을 입력해주세요.");
			form.name.focus();
			
			return;
		}
		if (form.nickname.value.trim().length == 0) {
			alert("닉네임을 입력해주세요.");
			form.nickname.focus();
			
			return;
		}
		if (form.email.value.trim().length == 0) {
			alert("e-mail을 입력해주세요.");
			form.email.focus();
			
			return;
		}
		if (form.cellPhoneNo.value.trim().length == 0) {
			alert("연락처를 입력해주세요.");
			form.cellPhoneNo.focus();
			
			return;
		}
		
		form.submit();
	};
</script>


<form name="form" onsubmit="check(this); return false;" action="doJoin" method="POST">
	<span>로그인 ID</span>
	<br />
	<input type="text" name="loginId" maxlength="50" placeholder="ID 입력">
	<button name="dupIdCheck" onclick="checkDupId(this);" type = "button">중복체크</button>
	<br />
	<span>로그인 PW</span>
	<br />
	<input type="password" name="loginPw" maxlength="50"
		placeholder="PW 입력">
	<br />
	<span>로그인 PW 확인</span>
	<br />
	<input type="password" name="loginPwConfirm" maxlength="50"
		placeholder="PW 입력">
	<br />
	<span>이름</span>
	<br />
	<input type="text" name="name" maxlength="50" placeholder="이름 입력">
	<br />
	<span>닉네임</span>
	<br />
	<input type="text" name="nickname" maxlength="50" placeholder="닉네임 입력">
	<br />
	<span>E-Mail</span>
	<br />
	<input type="email" name="email" maxlength="100"
		placeholder="이메일 주소 입력">
	<br />
	<span>연락처</span>
	<br />
	<input type="number" name="cellPhoneNo" maxlength="50"
		placeholder="연락처 입력">
	<br />
	<hr />
	<input type="submit" value="회원가입">
	<button type="button" onclick="history.back();">뒤로가기</button>

</form>




<%@ include file="../../part/foot.jspf"%>

 

<UsrMemberController.java>

// 회원가입 폼 작성 시 ajax로 중복체크
	public String getLoginIdDup(HttpServletRequest request, HttpServletResponse response) {
		
		Map<String, Object> rs = new HashMap<>();
		
		String loginId = request.getParameter("loginId");
		
		Member member = memberService.getMemberByLoginId(loginId);
		
		String code = null;
		String msg = null;
		
		
		if(member == null) {
			code = "S-1";   //S = success의 약자, 숫자는 유형 개념
							//1이면 일반적인 성공, 2이면 약간 문제는 있지만 성공? 이런 방식
			msg = "해당 ID는 사용이 가능합니다.";
		}
		if(member != null){
			code = "F-1";
			msg = "해당 ID는 이미 사용중입니다.";
		}
		if(loginId.trim().length() == 0){
			code = "F-2";
			msg = "해당 ID는 사용이 불가능합니다.";
		}
		
		rs.put("loginId", loginId);
		rs.put("code", code);
		rs.put("msg", msg);
		
		//rs 맵리스트를 json방식으로 생성해서 data로 보내기
		request.setAttribute("data", Util.getJsonText(rs));
		
		return "common/pure";
	}