ajaxEx01.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>유효성 검사 + ajax 아이디 중복 검사</title>
<script type="text/javascript" src="<%=request.getContextPath()%>/resource/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
/*
제출실습1. '성명, 아이디, 패스워드, 패스워드 확인, 이메일, 성별'을
유효성 검사를 하는 코드를 작성하고, 아이디는 아이디 중복검사를 하도록 하여라.
(아이디 중복검사 ajax : 중복검사하는 jsp 페이지는 직접 만들고 작성하시오.)
*/
$(function() {
$('#btn').click(function() {
var valName = $('#name').val();
var valId = $('#id').val();
var valPass = $('#pass').val();
var valCPass = $('#cPass').val();
var valEmail = $('#email').val();
var idCheck = $('#idCheck').attr('idCheck');
if(valName == null || valName == undefined || valName == ""){ alert('성명을 입력해주세요.'); $('#name').focus(); return;}
if(valId == null || valId == undefined || valId == ""){ alert('아이디를 입력해주세요.'); $('#id').focus(); return;}
if(idCheck == "" || idCheck == "N"){alert('아이디 중복확인를 해주세요'); $('#idCheck').focus(); return;}
if(valPass == null || valPass == undefined || valPass == ""){ alert('패스워드을 입력해주세요.'); $('#pass').focus(); return;}
if(valCPass == null || valCPass == undefined || valCPass == ""){ alert('패스워드 확인을 입력해주세요.'); $('#cPass').focus(); return;}
if(valPass != valCPass){ alert('패스워드와 패스워드 확인이 같지 않습니다.'); $('#pass').val(""); $('#cPass').val(""); $('#pass').focus(); return;}
if(valEmail == null || valEmail == undefined || valEmail == ""){ alert('이메일을 입력해주세요.'); $('#email').focus(); return;}
if(!$('.gender').prop('checked')){ alert('성별을 체크해주세요.'); $('.gender')[0].focus(); return;}
$('#login').submit();
});
$('#idCheck').click(function(){
var valId = $('#id').val();
var request = $.ajax({
url: "<%=request.getContextPath() %>/idcheck.jsp", //통신할 url
method: "POST", //통신할 메서드 타입
data: { id : valId }, //전송할 데이타
dataType: "json"
});
request.done(function( data ) {
console.log(data.result)
if(data.result == 'Y'){
$('#idCheck').attr('idCheck','Y');
alert('사용 가능한 아이디입니다.');
} else{
$('#idCheck').attr('idCheck','N');
alert('사용할 수 없는 아이디입니다.');
}
});
request.fail(function( jqXHR, textStatus ) {
alert( "Request failed: " + textStatus );
});
});
})
</script>
</head>
<body>
<form action="#" method="post" id="login">
<table>
<tr><td>성명</td><td><input type="text" id="name"></td><td></td></tr>
<tr><td>아이디</td><td><input type="text" id="id"></td><td><button type="button" idCheck="" id="idCheck">아이디 중복확인</button></td></tr>
<tr><td>패스워드</td><td><input type="password" id="pass"></td><td></td></tr>
<tr><td>패스워드 확인</td><td><input type="password" id="cPass"></td><td></td></tr>
<tr><td>이메일</td><td><input type="text" id="email"></td><td></td></tr>
<tr><td>성별</td><td>남 <input type="radio" class="gender" name="gender" value="남"> 여 <input type="radio" class="gender" name="gender" value="여"> </td><td></td></tr>
<tr><td></td><td></td><td><button type="button" id="btn">회원가입</button></td><tr>
</table>
</form>
</body>
</html>idcheck.jsp
<%@ page language="java" contentType="application/json; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="com.google.gson.Gson" %>
<%@ page import="java.util.*" %>
<%
/*
id001, id002, id003은 데이터베이스 조회 하에 존재하는 아이디라고 가정한다.
*/
Gson gson = new Gson();
Map map = new HashMap();
String id = request.getParameter("id");
if( !"".equals(id) && id != null){
if("id001".equals(id) || "id002".equals(id) || "id003".equals(id)){
map.put("result", "N");
} else {
map.put("result", "Y");}
}
String result = gson.toJson(map);
out.print(result);
%>
<풀이>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>유효성 검사 + ajax 아이디 중복 검사</title>
<style type="text/css">
.input-group{margin-bottom: 10px;}
.input-group label {
color: #424242;
font-size: 15px;
padding-right: 10px;
}
</style>
<script type="text/javascript" src="<%=request.getContextPath() %>/resource/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
/*
제출실습1. '성명, 아이디, 패스워드, 패스워드 확인, 이메일, 성별' 을
유효성 검사를 하는 코드를 작성하고, 아이디는 아이디 중복검사를 하도록하여라.
(아이디 중복검사 ajax : 중복검사하는 jsp 페이지는 직접 만들고 작성하시오.)
*/
$(function(){
/************************************************
아이디 중복 체크 함수
작성자 : 홍길동
작성일 : 2020-04-08
'아이디 중복검사', '회원가입' 버튼클릭시 같은 코드로
확인하도록 하기위해서 함수로 별도 제작
2곳에서 사용하고 비동기화로 체크가 동시에 불가능하여
동기화로 ajax 통신하도록 설정
*************************************************/
var userIdCheck = function(){
var userId = $('[name="userId"]').val();
var getCheckData;
//ajax 동기화
var request = $.ajax({
url: "ajaxIdCheck.jsp", //통신할 url
method: "POST", //통신할 메서드 타입
data: { userId : userId }, //전송할 데이타
dataType: "json",
async : false //동기화시키기
});
request.done(function( data ) {
if(data != undefined && data != ''){
//동기화임으로 getCheckData에 결과값 받아
//아래 코드에서 처리 가능
getCheckData = data;
}
});
request.fail(function( jqXHR, textStatus ) {
alert( "Request failed: " + textStatus );
});
//동기화 방식으로 하여 결과값을 받아 올수 있어
//getCheckData 데이타 체크
if(getCheckData == undefined || getCheckData.result == 'Y'){
alert('사용할 수 없는 아이디 입니다.');
$('[name="idCheck"]').val('N');
return true;
}else{
$('[name="idCheck"]').val('Y');
}
return false;
}
/************************************************
유효성 검사 함수
작성자 : 홍길동
작성일 : 2020-04-08
반복되는 작업을 최소화 하기위해서 함수로 유효성 검사 제작
함수 리턴값이 true 일경우 에러
!!객체에 담긴 키 정의 내역
1) target : 체크 대상
2) compareTarget : 체크 대상의 값과 비교 할 대상 - 값이 있을 경우 target과 비교
3) lenTarget : 데이타 갯수 체크 대상 - 값이 존재할 경우 length가 0이면 안됨
4) msg : 에러 발생시 출력할 문구
*************************************************/
var valueChecks = function(checkObj){
var target = checkObj.target; //값 체크 대상
var compareTarget = checkObj.compareTarget; //값과 일치 비교 대상
var lenTarget = checkObj.lenTarget; //데이타 갯수
var msg = checkObj.msg; //에러 발생시 문구
var isCheck = false; //정상일 경우 false 에러일경우 true 반환
if(target != undefined){
if(compareTarget != undefined){
if(target.val() != compareTarget.val()){
alert(msg);
compareTarget.val('')
compareTarget.focus();
isCheck = true;
}
}else if(lenTarget != undefined){
if(lenTarget.length == 0){
alert(msg);
target.eq(0).focus();
isCheck = true;
}
}else{
if(target.val() == ''){
alert(msg);
target.focus();
isCheck = true;
}
}
}else{
isCheck = true;
}
return isCheck;
}
//회원가입 클릭 이벤트
$('#joinBtn').click(function(){
if(valueChecks({target : $('[name="userName"]'), msg : '회원명을 입력해주세요.'})) return;
if(valueChecks({target : $('[name="userId"]'), msg : '회원아이디를 입력해주세요.'})) return;
if(valueChecks({target : $('[name="userPw"]'), msg : '패스워드를 입력해주세요.'})) return;
if(valueChecks({target : $('[name="userPw"]'), msg : '패스워드가 틀립니다.', compareTarget : $('[name="userPwCheck"]')})) return;
if(valueChecks({target : $('[name="userEmail"]'), msg : '이메일을 입력해주세요.'})) return;
if(valueChecks({target : $('[name="userGender"]'), msg : '성별을 입력해주세요.', lenTarget : $('[name="userGender"]:checked')})) return;
if(valueChecks({target : $('[name="idCheck"]'), msg : '아아디 중복검사를 실행 해주세요.'})) return;
if(userIdCheck()) return; //아이디 중복 검사 한번더 실시
$('#joinFrom').submit();
});
//아이디 중복검사 클릭 이벤트
$('#userIdCheck').click(function(){
if(!userIdCheck()){
alert('사용할 수 있는 아이디 입니다.');
}
});
});
</script>
</head>
<body>
<form id="joinFrom" action="./ajaxEx01.jsp" method="post">
<input type="hidden" name="idCheck">
<div class="input-group">
<label>회원명 </label>
<input type="text" name="userName">
</div>
<div class="input-group">
<label>아이디 </label>
<input type="text" name="userId">
<button type="button" id="userIdCheck">아이디 중복 검사</button>
<div id="userIdMsg"></div>
</div>
<div class="input-group">
<label>패스워드 </label>
<input type="password" name="userPw">
</div>
<div class="input-group">
<label>패스워드 확인 </label>
<input type="password" name="userPwCheck">
</div>
<div class="input-group">
<label>이메일 </label>
<input type="text" name="userEmail">
</div>
<div class="input-group">
<label>
<input type="radio" name="userGender" value="남">
남
</label>
<label>
<input type="radio" name="userGender" value="여">
여
</label>
</div>
<button type="button" id="joinBtn"> 회원가입 </button>
</form>
</body>
</html>
<%@ page language="java" contentType="application/json; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="com.google.gson.Gson" %>
<%@ page import="java.util.Map" %>
<%@ page import="java.util.HashMap" %>
<%
/*
데이타 베이스에서 조회하였다는 가정하에
아래 데이타 나열.
나열된 데이타는 이미 존재하는 아이디
id001, id002, id003
*/
String userId = request.getParameter("userId");
//Gson 인스턴스화(객체화)
Gson gson = new Gson();
//Map을 객체화 하기
Map map = new HashMap();
if(
"id001".equals(userId)
|| "id002".equals(userId)
|| "id003".equals(userId)
|| "".equals(userId)
|| userId == null
){
map.put("result", "Y");
}else{
map.put("result", "N");
}
String result = gson.toJson(map);
out.print(result);
%>
'JavaScript' 카테고리의 다른 글
| [BootStrap] grid / responsive-utilities (0) | 2020.04.08 |
|---|---|
| [BootStrap] components / modals (0) | 2020.04.08 |
| [JQuery] ajax 실습 (0) | 2020.04.07 |
| [JQuery + Ajax] html, json call / gson (0) | 2020.03.31 |