[JSP] ajax 사용하기_회원가입 유효성 검사

기본 세팅

: 제이 쿼리를 사용하기 때문에 해당 코드를 넣어줘야 합니다.

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

---

아이디 중복 체크를 위해 ajax 연결 및 값을 넘기는 페이지

: $.ajax({

        type: "", 

        url: "",

        data: "",

        success: function(data){

        }

});

var contextPath = window.location.pathname.substring(0, window.location.pathname.indexOf("/",2));

	// 제이 쿼리 실행 코드
	$(document).ready(function() {
    // [중복 체크] 누를 경우,
		$("#checkId").click(function() {
        // 값이 있다면,
			if ($("#id").val()) {
            // JSON 형태로 저장하고
				var query = {
					id : $("#id").val()
				};
				
                //ajax를 통해 값을 넘겨준다.
				$.ajax({
					type : "post",//요청방식
					url : "03_ajax_idcheck.jsp",//요청페이지
					data : query,//파라미터
					success : function(data) {//요청페이지 처리에 성공시
						alert(data);
						var str = '<p id="check">';					
						var loc = data.indexOf(str);
						var len = str.length;
						var check = data.substr(loc+len, 1);
						alert(check);
						if(check == "1"){
							alert("사용할 수 없는 아이디");
							$("#id").val("");
						}else if (check == "0"){
							alert("사용할 수 있는 아이디");
						}								
					}
				});
			} else {//아이디를 입력하지 않고 [ID중복확인]버튼을 클릭한 경우
				alert("사용할 아이디를 입력");
				$("#id").focus();
			}
		});
        
        // [가입하기]버튼을 클릭하면 자동실행
		$("#join").click(function() {
			if (checkIt()) {
				var query = {
					id : $("#id").val(),
					passwd : $("#passwd").val(),
					name : $("#name").val(),
					address : $("#address").val(),
					tel : $("#tel").val()
				};
				alert("회원가입을 축하합니다.");
				window.location.href = "01_ajax_index.jsp";				
			}
		});

		//[취소]버튼을 클릭하면 자동실행
		$("#cancle").click(function() {
			window.location.href = "01_ajax_index.jsp";
		});
	});
    
    // 모든 값을 입력했는지, 비밀번호가 동일한지 체크
	function checkIt() {

		if (!$("#id").val()) {//아이디를 입력하지 않으면 수행
			alert("아이디를 입력하세요");
			$("#id").focus();
			return false;//사용자가 서비스를 요청한 시점으로 돌아감
		}

		if (!$("#passwd").val()) {//비밀번호를 입력하지 않으면 수행
			alert("비밀번호를 입력하세요");
			$("#passwd").focus();
			status = false;
			return false;
		}
		
		//비밀번호와 재입력비밀번호가 같지않으면 수행
		if ($("#passwd").val() != $("#repass").val()) {
			alert("비밀번호를 동일하게 입력하세요");
			$("#repass").focus();
			return false;
		}

		if (!$("#name").val()) {//이름을 입력하지 않으면 수행
			alert("사용자 이름을 입력하세요");
			$("#name").focus();
			return false;
		}

		if (!$("#address").val()) {//주소를 입력하지 않으면 수행
			alert("주소를 입력하세요");
			$("#address").focus();
			return false;
		}

		if (!$("#tel").val()) {//전화번호를 입력하지 않으면 수행
			alert("전화번호를 입력하세요");
			$("#tel").focus();
			return false;
		}
		
		return true;
	}

---

ajax를 통해 값을 넘겨 받고, 중복 체크를 하는 페이지

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String idList [] = {"qwer" , "asdf" , "zxcv"};
	request.setCharacterEncoding("utf-8");
	String id = request.getParameter("id");
	int check = 0;
	for(int i = 0; i < idList.length; i++){
		if(idList[i].equals(id) == true){
			check = 1;
			break;
		}
	}
	request.setAttribute("check", check);
%>   
<p id="check">${check}

---

실행 모습

: 아이디 중복 검사, 빈칸 검사, 비밀번호 검사