2024-12-30
<%@ 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>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script type="text/javascript">
$(function() {
// 아이디 중복 체크라는 버튼에 마우스가 올라갔을 떄 호출되는 무명함수.
$("#idCheck_btn").mouseover(function() {
$("#idCheck").hide(); // span 태그를 숨기는 코드.
// 아아디 입력한 데이터를 가져오는 메서드
let user_id = $("#member_id").val();
// 입력한 아이디의 글자 길이가 4자 미만이면
if ($.trim($("#member_id").val()).length < 4) {
let warningTxt = '<font color="red">아이디는 4자 초과이여야 합니다.</font>';
$('#idCheck').text(""); // span 태그 영역 초기화
$('#idCheck').show(); // span 태그를 보여주는 기능
$('#idCheck').append(warningTxt);
$('#member_id').val("").focus();
return false;
}
// 입력한 아이디의 글자 길이가 16자 초과면
if ($.trim($("#member_id").val()).length > 16) {
let warningTxt = '<font color="red">아이디는 16자 미만이여야 합니다.</font>';
$('#idCheck').text(""); // span 태그 영역 초기화
$('#idCheck').show(); // span 태그를 보여주는 기능
$('#idCheck').append(warningTxt);
$('#member_id').val("").focus();
return false;
}
// 아이디 중복 여부 확인 - Ajax 기술을 이용하여 진행
$.ajax({
type : "post",
url : "data/idCheck.jsp",
data : {userId : user_id},
dataType : "text",
success : function(res) {
if (res == -1) {
// 중복인 경우
let warningTxt = '<font color="red">중복 아이디입니다.</font>';
$('#idCheck').text(""); // span 태그 영역 초기화
$('#idCheck').show(); // span 태그를 보여주는 기능
$('#idCheck').append(warningTxt);
$('#member_id').val("").focus();
} else {
// 사용 가능한 아이디인 경우
let warningTxt = '<font color="red">사용 가능한 아이디입니다.</font>';
$('#idCheck').text(""); // span 태그 영역 초기화
$('#idCheck').show(); // span 태그를 보여주는 기능
$('#idCheck').append(warningTxt);
//$('#member_id').val("").focus();
}
},
error : function() {
alert('데이터 통신 오류입니다~~~')
}
});
});
});
</script>
</head>
<body>
<div align="center">
<hr width="30%" color="maroon">
<h3>회원 가입 폼 페이지</h3>
<hr width="30%" color="maroon">
<br> <br>
<form method="post">
<table border="1" width="500">
<tr>
<th>회원 아이디</th>
<td>
<input name="member_id" id="member_id">
<input type="button" value="아이디중복체크"
id="idCheck_btn"> <br>
<span id="idCheck"></span>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
<%@page import="com.member.model.MemberDAO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String user_id = request.getParameter("userId").trim();
MemberDAO dao = MemberDAO.getInstance();
int check = dao.checkMemberId(user_id);
// Ajax에게 응답을 해 주면 됨
out.println(check);
%>'JSP > 기초 내용 정리' 카테고리의 다른 글
| JSP(Bootstrap)_00 (1) | 2024.12.31 |
|---|---|
| JSP(Ajax)_Customer (0) | 2024.12.31 |
| JSP(Ajax)_04 (0) | 2024.12.31 |
| JSP(Ajax)_03 (0) | 2024.12.31 |
| JSP(Ajax)_02 (0) | 2024.12.31 |