🔥 아이디 중복체크 기능 🔥
✔️ Spring_Project에서 진행함
💻 memberEnrollForm.jsp
👉🏻 회원가입 버튼 기본 상태 disabled 속성 추가
👉🏻 아이디값 밑에 결과값을 출력해 줄 수 있는 div 태그 생성
👉🏻 form 태그에 id 설정값 추가
👉🏻 최소 5글자 이상으로 아이디값이 입력되어 있을 때만 ajax 요청할 수 있도록 script 만들기 (유료 프로그램의 경우쿼리문의 개수가 한정되어 있을 수 있기 때문에)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 메뉴바 -->
<jsp:include page="../common/header.jsp" />
<div class="content">
<br><br>
<div class="innerOuter">
<h2>회원가입</h2>
<br>
<form action="insert.me" method="post" id="enrollForm">
<div class="form-group">
<label for="userId">* ID : </label>
<input type="text" class="form-control" id="userId" placeholder="Please Enter ID" name="userId" required> <br>
<div id="checkResult" style="font-size:0.8em; display:none;"></div>
<label for="userPwd">* Password : </label>
<input type="password" class="form-control" id="userPwd" placeholder="Please Enter Password" name="userPwd" required> <br>
<label for="checkPwd">* Password Check : </label>
<input type="password" class="form-control" id="checkPwd" placeholder="Please Enter Password" required> <br>
<label for="userName">* Name : </label>
<input type="text" class="form-control" id="userName" placeholder="Please Enter Name" name="userName" required> <br>
<label for="email"> Email : </label>
<input type="text" class="form-control" id="email" placeholder="Please Enter Email" name="email"> <br>
<label for="age"> Age : </label>
<input type="number" class="form-control" id="age" placeholder="Please Enter Age" name="age"> <br>
<label for="phone"> Phone : </label>
<input type="tel" class="form-control" id="phone" placeholder="Please Enter Phone (-없이)" name="phone"> <br>
<label for="address"> Address : </label>
<input type="text" class="form-control" id="address" placeholder="Please Enter Address" name="address"> <br>
<label for=""> Gender : </label>
<input type="radio" id="Male" value="M" name="gender" checked>
<label for="Male">남자</label>
<input type="radio" id="Female" value="F" name="gender">
<label for="Female">여자</label>
</div>
<br>
<div class="btns" align="center">
<button type="submit" class="btn btn-primary" disabled>회원가입</button>
<button type="reset" class="btn btn-danger">초기화</button>
</div>
</form>
</div>
<br><br>
<script>
$(function() {
// 아이디를 입력받는 input 요소 객체를 변수에 담아두기 => keyup 이벤트 걸기
var $idInput = $("#enrollForm input[name=userId]");
$idInput.keyup(function() {
if($idInput.val().length >= 5) {
// ajax를 요청하여 중복체크
$.ajax({
url : "idCheck.me",
data : {checkId : $idInput.val()},
success : function() {
},
error : function() {
console.log("아이디 중복 체크용 ajax 통신 실패!");
}
});
}
});
});
</script>
</div>
<!-- 푸터바 -->
<jsp:include page="../common/footer.jsp" />
</body>
</html>
⌨️ 5자 이상일 때만 요청이 잘 들어가는지 확인할 MemberController
@RequestMapping("idCheck.me")
public void idCheck(String checkId) {
System.out.println(checkId);
}
👉🏻 현재 회원가입 폼에서 아이디가 5글자 이상일 때만 요청 들어감
💻 MemberServiceImpl
@Override
public int idCheck(String checkId) {
return memberDao.idCheck(sqlSession, checkId);
}
💻 MemberDao
public int idCheck(SqlSessionTemplate sqlSession, String checkId) {
return sqlSession.selectOne("memberMapper.idCheck", checkId);
}
💻 member-mapper.xml
<select id="idCheck" parameterType="string" resultType="_int">
SELECT COUNT(*)
FROM MEMBER
WHERE USER_ID = #{checkId}
</select>
💻 MemberController
@ResponseBody
@RequestMapping(value="idCheck.me", produces="text/html; charset=UTF-8")
public String idCheck(String checkId) {
// System.out.println(checkId);
int count = memberService.idCheck(checkId);
/*
if(count > 0) { // 이미 존재하는 아이디 => 사용 불가능 (NNNNN)
return "NNNNN";
} else { // 사용 가능 (NNNNY)
return "NNNNY";
}
*/
// 위와 같이 if문을 써도 무방하나 삼항연산자로도 표현 가능함!
return (count > 0) ? "NNNNN" : "NNNNY";
}
💻 MemberEnrollForm
<script>
$(function() {
// 아이디를 입력받는 input 요소 객체를 변수에 담아두기 => keyup 이벤트 걸기
var $idInput = $("#enrollForm input[name=userId]");
$idInput.keyup(function() {
// 우선 최소 5글자 이상으로 아이디값이 입력되어 있을 때만 ajax 요청
// => 쿼리문의 갯수가 한정되어 있을 수 있기 때문
if($idInput.val().length >= 5) {
// ajax를 요청하여 중복체크
$.ajax({
url : "idCheck.me",
data : {checkId : $idInput.val()},
success : function(result) {
// console.log(result);
if(result == "NNNNN") { // 사용 불가능
// 빨간색 메시지 출력
$("#checkResult").show();
$("#checkResult").css("color", "red").text("중복된 아이디가 존재합니다. 다시 입력해 주세요.");
// 사용 가능 아이디를 쳤다가 다시 불가능한 아이디를 친다면 버튼 비활성화
$("#enrollForm button[type=submit]").attr("disabled", true);
} else { // 사용 가능
// 초록색 메시지 출력
$("#checkResult").show();
$("#checkResult").css("color", "green").text("멋진 아이디네요!");
// 버튼 활성화
$("#enrollForm button[type=submit]").attr("disabled", false);
}
},
error : function() {
console.log("아이디 중복 체크용 ajax 통신 실패!");
}
});
} else { // 5글자 이하라면? 혹은 사용자가 5글자 이상의 아이디를 쳤다가 다시 5글자 미만으로 줄인다면?
// 버튼 비활성화 및 메시지 내용 숨기기
$("#checkResult").hide();
$("#enrollForm button[type=submit]").attr("disabled", true);
}
});
});
</script>
더보기
✏️ 여러 가지 테스트를 해 봤을 때(조건 일치/불일치 순서 바꿔도) 알림 메시지/회원가입 버튼 비·활성화 잘됨
👉🏻 중복된 아이디 입력 시 / 버튼 비활성화
👉🏻 중복된 아이디 입력 후 중복되지 않은 아이디 입력 시 / 버튼 활성화
👉🏻 중복된 아이디 입력 후 중복되지 않은 아이디 입력 후 5자 이하 / 버튼 비활성화