회원가입 (Spring + MyBatis) - 아이디 중복 및 비밀번호 검사 추가

기능 - 회원가입 창의 아이디 입력 시 Ajax를 이용해 실시간으로 아이디 중복 검사

         - 비밀번호 두 번 입력 후 두 값 비교 

 

 

 

실시간 아이디 중복검사 Ajax 구현

 

JSON.parse - json포멧으로 되어 있는 데이터를 json 객체로 만들어준다(?) 

                         - 반대로 JSON.stringify는 json 객체를 json 포멧 데이터로 만들어준다.

(이 전에는 안써도 잘됬는데 갑자기 controller에서 온 값 들이 undefined으로 출력되어서 JSON.parse를 쓰니 해결)

 

아이디가 중복되지 않으면 가입 버튼의 disabled를 삭제한다.

<script>
function check_id() {

	var idCheck = 0;

	var inputed = $('input#idzon').val();
	console.log(inputed);

	$.ajax({
		data : inputed,
		url : "idCheck",
		type : "POST",
		dataType : "JSON",
		contentType : "application/json; charset=UTF-8",
		success : function(data) {
			var result = JSON.parse(data);

			if (result.check > 0) {
				$("#idzon").css("background-color", "#FFCECE");
				$(".id-text").css("margin-bottom", "16px");
				$(".id-text").css("color", "rgb(255, 120, 203)");
				$(".id-text").css("text-align", "center");
				$(".id-text").text("이미 사용 중인 아이디입니다.");
				$("button#joinSubmit").attr("disabled", "true");
			} else if (result.check == 0) {
				$("#idzon").css("background-color", "#B0F6AC");
				$(".id-text").css("margin-bottom", "16px");
				$(".id-text").css("color", "#34aadc");
				$(".id-text").css("text-align", "center");
				$(".id-text").text("사용 가능한 아이디입니다.");
				$("button#joinSubmit").removeAttr("disabled");
			}
		}
	});
};

		
</script>

 

비밀번호 검사 구현 (7월 20일 추가)

 

두 입력값이 일치하지 않으면 가입 버튼의 disabled를 다시 생성한다.

function check_pw() {

	var pw = $('input#pw').val();
	var checkPw = $('input#checkPw').val();

	if (pw != "" || pw != null) {
		$(".pw-text").css("margin-bottom", "16px");
		$(".pw-text").css("color", "rgb(255, 120, 203)");
		$(".pw-text").css("text-align", "center");
		$(".pw-text").text("↓ 비밀번호를 한 번 더 입력해주세요.");
	};
	if (pw == checkPw) {
		$("input[name=pw]").css("background-color", "#B0F6AC");
		$(".ok-text").css("margin-bottom", "16px");
		$(".ok-text").css("color", "#34aadc");
		$(".ok-text").css("text-align", "center");
		$(".ok-text").text("사용 가능한 비밀번호입니다.");
		$("button#joinSubmit").removeAttr("disabled");
	} else if (pw != checkPw) {
		$("input[name=pw]").css("background-color", "#FFCECE");
		$(".ok-text").css("margin-bottom", "16px");
		$(".ok-text").css("color", "rgb(255, 120, 203)");
		$(".ok-text").css("text-align", "center");
		$(".ok-text").text("비밀번호를 확인해주세요.");
		$("button#joinSubmit").attr("disabled", "true");
	}
	;
};

 

 

 

비밀번호가 일치하지 않을 때 

 

 

비밀번호 일치할 때

 

 

---

 

 

ajax 동작 방식

 

var inputed = $('input#idzon').val();

- input의 id="idzon"을 찾아 입력된 값을 inputed에 저장

 

data : inputed,
url : "idCheck",
type : "POST",
dataType : "JSON",

- JSON타입의 inputed 데이터를 idCheck로 POST방식으로 전송

 

contentType : "application/json; charset=UTF-8"

- contentType을 지정해주지 않으면 디폴트로 application/x-www-form-urlencoded; charset=UTF-8으로 지정

 

success : function(data) {}

- ajax 통신이 성공했을 때 실행될 함수

 

 

 

Controller

 

*ajax 통신의 핵심*

-@ResponseBody : JSON 타입으로 view에 데이터를 넘김

-@RequestBody : view에서 넘어온 JSON타입의 데이터를 받음

-Map : JSON의 형태는 (key,value)이기 때문에 map으로 전송

@ResponseBody
@RequestMapping(value = "/idCheck", method = RequestMethod.POST, produces = "application/json")
public Map<Object, Object> idCheck(@RequestBody String id) throws Exception {
		
	Map<Object,Object> map = new HashMap<Object,Object>();
	int result = 0;
	
	result = service.idCheck(id);
	map.put("check", result);
		
	return map;
}

 

Service

 

public int idCheck(String id) throws Exception {
	return dao.idCheck(id);
}

 

DAO

 

public int idCheck(String id) throws Exception {
	return sqlSession.selectOne(namespace + ".idCheck", id);
}

 

Mapper

 

COUNT 함수를 써서 id 컬럼에 들어있는 데이터와 사용자 입력 데이터를 비교해 데이터 갯수를 가져옴

(중복된 데이터가 없으면 0, 중복된 데이터가 있으면 1)

<select id="idCheck" resultType = "int" parameterType = "String">
    SELECT COUNT(id)
    FROM
    	member
    WHERE
    	id = #{id}	
</select>

 

 

view로 데이터 갯수를 넘겨주면 ajax의 success에서 if문으로 중복 검사 실행

 

 

동작

(7월 20일 회원가입 페이지 변경하였지만 아이디 중복검사는 건드리지 않았으니 똑같이 작동)

 

(회원 테이블)

 

아이디가 중복되지 않았을 때

join.jsp

Chrome 개발자 모드 Console 화면

 

 

아이디가 중복되었을 때

join.jsp

Chrome 개발자 모드 Console 화면

 

 

 

-끝-