<이메일>
😱 이메일 중복 확인
😱 메일 최대 길이 30자 제한
<닉네임>
😱 닉네임 중복 확인
이메일 중복 확인 참고하여 설정
닉네임 2~10자 제한
회원가입 폼에서 중복확인 버튼을 눌렀을 때 진행되는 이벤트이기 때문에 onclick 속성에 선언적 함수 걸기
onchange속성으로 중복확인 버튼 없이 자동으로 중복확인하도록 수정함!
(이메일 중복체크도 동일)
더보기
1. memberEnrollForm.jsp
<tr>
<th colspan="6">닉네임</th>
</tr>
<tr>
<th colspan="6">
<input type="text" name="memNickname" minlength="2" maxlength="10" onchange="nicknameCheck();" required>
</th>
</tr>
<tr>
<td colspan="6">
<div><label id="nicknameCheckOutput"></label></div>
</td>
</tr>
<script>
// 닉네임 중복체크
function nicknameCheck() {
var $memNickname = $("#enroll_table input[name=memNickname]");
$.ajax({
url : "nicknameCheck.me",
data : {checkNickname : $memNickname.val()},
success : function(result) {
// result 값은 "possible" 또는 "impossible"
if(result == "impossible") {
$("#nicknameCheckOutput").text("이미 존재하는 닉네임이므로 사용할 수 없습니다.").css("color","red").css("font-size","12px");
$memNickname.val("");
$memNickname.focus();
} else {
$("#nicknameCheckOutput").text("사용 가능한 닉네임입니다!").css("color","yellow").css("font-size","12px");
}
},
error : function () {
console.log("닉네임 중복 체크용 ajax 통신 실패!");
}
});
}
</script>2. NicknameCheckController (/nicknameCheck.me)
니가 보낸 키값에 request.getParameter을 사용해서 밸류 넣어 줄게!
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// checkNickname이라는 변수에 든 value값 뽑기
String checkNickname = request.getParameter("checkNickname");
// 전달값인 밸류를 서비스로 넘겨서 요청 처리 후 결과 받기
// 응답 데이터는 1개만 넘기기 때문에 JSON 필요 없이 Ajax로 해결 가능
// 넘겨 주기
int count = new MemberService().nicknameCheck(checkNickname);
// 응답 데이터에 한글이 있다면 깨질 수도 있으니 문서 타입과 인코딩 방식 알려 주기
response.setContentType("text/html; charset=UTF-8");
// DB까지 다녀온 count에 중복 이메일 값이 있다면 1, 없다면 0이 담겨 있을 것
if(count > 0) {
response.getWriter().print("impossible");
} else {
response.getWriter().print("possible");
}
}3. MemberService
// 닉네임 중복체크용 서비스
public int nicknameCheck(String nicknameCheck) {
Connection conn = JDBCTemplate.getConnection();
int count = new MemberDao().nicknameCheck(conn, nicknameCheck);
JDBCTemplate.close(conn);
return count;
}4. MemberDao
public int nicknameCheck(Connection conn, String checkNickname) {
// SELECT문 => ResultSet 객체 (숫자 1개)
// 필요한 변수 세팅
int count = 0;
PreparedStatement pstmt = null;
ResultSet rset = null;
String sql = prop.getProperty("nicknameCheck");
try {
pstmt = conn.prepareStatement(sql);
pstmt.setString(1, checkNickname);
rset = pstmt.executeQuery();
if(rset.next()) {
count = rset.getInt("COUNT(*)");
}
} catch (SQLException e) {
e.printStackTrace();
} finally {
JDBCTemplate.close(rset);
JDBCTemplate.close(pstmt);
}
return count;
}5. member-mapper.xml
<entry key="nicknameCheck">
SELECT COUNT(*)
FROM MEMBER
WHERE MEM_NICKNAME = ?
</entry>
😱 닉네임 2~10자리의 한글, 영문, 숫자, 특수문자
2~10자리 설정(minlength, maxlength) 완료
더보기
1. memberEnrollForm.jsp
<script>
// 닉네임 중복 체크용 제이쿼리
function nicknameCheck() {
var $memNickname = $("#enroll_table input[name=memNickname]");
let nickname = $("#memNickname").val();
let regNickname = /^[a-zA-Z0-9ㄱ-ㅎ가-힣]{2,10}$/;
$.ajax({
url : "nicknameCheck.me",
data : {checkNickname : $memNickname.val()},
success : function(result) {
// result 값은 "possible" 또는 "impossible"
if(result == "impossible") {
$("#nicknameCheckOutput").text("이미 존재하는 닉네임이므로 사용할 수 없습니다.").css("color","red").css("font-size","12px");
$memNickname.val("");
$memNickname.focus();
} else {
if(regNickname.test(nickname) == false) {
$("#nicknameCheckOutput").text("닉네임은 2~10자로 한글/영문자/숫자/특수문자()가 포함될 수 있습니다.").css("color","red").css("font-size","12px");
} else {
$("#nicknameCheckOutput").text("사용 가능한 닉네임입니다!").css("color","rgb(232, 183, 34)").css("font-size","12px");
}
}
},
error : function () {
console.log("닉네임 중복 체크용 ajax 통신 실패!");
}
});
}
</script>특수문자 뭐뭐 들어가게 할 건지?? 확인하고 조건 바꾸기
regNickname 초기화 대괄호 안에 추가하면됨!! []
현재 한글,숫자, 영문자 2~10자면 가능한 상태임!
<비밀번호>
😱 비밀번호.val() == 비밀번호 확인.val() 일 때만 넘어가게 조건 걸기
더보기
<비밀번호 일치 확인>
1. memberEnrollForm.jsp
<tr>
<th colspan="6">비밀번호</th>
</tr>
<tr>
<th colspan="6">
<input type="password" class="pwd" id="pwd1" minlength="8" maxlength="16" required>
</th>
</tr>
<tr>
<th colspan="6">비밀번호 확인</th>
</tr>
<tr>
<th colspan="6">
<input type="password" class="pwd" id="pwd2" minlength="8" maxlength="16" required>
</th>
</tr>
<tr>
<th colspan="6">
<div><label id="pwdCheckOutput"></label></div>
</th>
</tr>
<script>
// 비밀번호 확인용 제이쿼리
$('.pwd').focusout(function() {
let pwd1 = $("#pwd1").val();
let pwd2 = $("#pwd2").val();
if(pwd1 != "" && pwd2 != "") { // 사용자가 비밀번호, 비밀번호 확인을 모두 입력했다면
if(pwd1 != pwd2) {
$("#pwdCheckOutput").text("비밀번호가 일치하지 않습니다. 다시 확인해 주세요.").css("color","red").css("font-size","12px");
} else {
$("#pwdCheckOutput").text("비밀번호가 일치합니다!").css("color","rgb(232, 183, 34)").css("font-size","12px");
}
}
});
</script>
😱 비밀번호 8~16자리 영어 대소문자, 숫자, 특수문자
특수문자 뭐뭐 들어가게 할 건지?? 확인하고 조건 바꾸기
regPwd 초기화 대괄호 안에 추가하면됨!! []
현재 숫자, 영문자 8~20자 면 가능한 상태임!
더보기
<script>
// 비밀번호 확인용 제이쿼리
$('.pwd').focusout(function() {
let pwd1 = $("#pwd1").val();
let pwd2 = $("#pwd2").val();
let regPwd = /^[a-zA-Z0-9]{8,20}$/;
if(pwd1 != "" && pwd2 != "") { // 사용자가 비밀번호, 비밀번호 확인을 모두 입력했다면
if(pwd1 != pwd2) {
$("#pwdCheckOutput").text("비밀번호가 일치하지 않습니다. 다시 확인해 주세요.").css("color","red").css("font-size","12px");
} else {
if(regPwd.test(pwd2) == false) {
$("#pwdCheckOutput").text("비밀번호는 8~20자로 숫자/영어 대,소문자/특수문자()가 포함될 수 있습니다.").css("color","red").css("font-size","12px");
} else {
$("#pwdCheckOutput").text("비밀번호가 일치합니다!").css("color","rgb(232, 183, 34)").css("font-size","12px");
}
}
}
});
</script>