회원가입시 아이디 확인, 빈칸 허용하지 않기

아이디 중복확인

 

1. Member.xml 업데이트

 

  id값 가져오기, mapper태그 내에 작성해준다.

<select id="getId" parameterType="String" resultType="Integer">
	SELECT COUNT(*)
	FROM MEMBER
	WHERE ID=#{id}
</select>

 

2. MemberDao, MemberDaoImpl 업데이트

 

  MemberDao

int getId(String id);

  MemberDaoImpl

@Override
public int getId(String id) {
    int count = session.selectOne(ns + "getId", id);
    return count;
}

 

3. MemberService, MemberServiceImpl 업데이트

 

  MemberService

int getId(String id);

  MemberService

@Override
public int getId(String id) {		
    return dao.getId(id);
}

 

4. MemberController 업데이트  Ajax를 쓸 때는 @ResponseBody 붙여주기

 

  Ajax란?

  자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능

  비동기 방식은 웹페이지를 리로드하지 않고 데이터를 불러오는 방식이다.

@ResponseBody	// Ajax
@RequestMapping(value = "idcheck.do", method = RequestMethod.POST)
public String idcheck(String id) {
    logger.info("MemberController idcheck() " + new Date());		
    System.out.println("id:" + id);

    int count = service.getId(id);
    System.out.println("count:" + count);		
    if(count > 0) {	// 아이디가 있음
        return "NO";
    }else {	       // 아이디가 없음
        return "YES";
    }		
}

 

5. regi.jsp 업데이트

  regi.jsp 업데이트회원가입 양식을 감싸고 있는 div태그 외부, body태그 내부에 작성한다.

<script type="text/javascript">
$(document).ready(function () {
	
	$("#btn").click(function () {
	//	alert('btn click');
	//	let id = $("#id").val();
	//	alert(id);
		
		// id 확인 -> ajax
		$.ajax({
			url:"idcheck.do",
			type:"post",
			data:{ id:$("#id").val() },
			success:function( msg ){
			//	alert('success');
			//	alert(msg);
			
				if(msg == "YES"){
					$("#idcheck").css("color", "#0000ff");
					$("#idcheck").html("사용할 수 있는 아이디입니다");
				}else{
					$("#idcheck").css("color", "#ff0000");
					$("#idcheck").html("사용 중인 아이디입니다");
					$("#id").val("");
				}			
			},
			error:function(){
				alert('error');
			}
		});
	});	
});
</script>

controller의 RequestMethod 방식과 ajax내 type이 일치해야 한다!

 

6. 가입 양식 빈칸 허용 X

  regi.jsp내의 script태그 내부에 추가해준다.

function account() {
//	alert('account');

	if($("#id").val() == ''){
		alert('아이디를 입력해 주십시오');
	}
	else if($("#pwd").val() == ''){
		alert('패스워드를 입력해 주십시오');
	}
	else if($("#name").val() == ''){
		alert('이름를 입력해 주십시오');
	}
	else if($("#email").val() == ''){
		alert('이메일을 입력해 주십시오');
	}
	else{
		$("#frm").submit();
	}
}