ajax 학습 3. 비동기 아이디 유효성 체크 구현

비동기 아이디 유효성 체크 구현

html

<td>
<input type="text" id="memberId" name="memberId" placeholder="아이디는 5자 이상"> <span id="p4"></span>
						<span class="guide ok">이 아이디는 사용 가능합니다</span>
						<span class="guide error">이 아이디는 사용할 수 없습니다.</span>
						<!-- $(".guide.ok").show(); 를 사용하면 보여줄 수 있음-->
						<!-- $(".guide.ok").hide(); 를 사용하면 보여줄 수 있음-->
					
					</td>

javascript

// 	$("#memberId").on("input",function(){ //이렇게도 가능
	$("#memberId").keyup(function(){
		var insertid = $("#memberId").val();
		var regID = /[a-z0-9_]{5,16}$/;
		var regID2 = /[a-z0-9]{1,4}$/;
		console.log(insertid =="")
// 		if(regID2.test(insertid)){
// 			$("#p4").html("아이디는 5자 이상이어야 합니다.")
// 		}
		if(insertid ==""){
			$("#p4").html("");
		}
		else if(!regID.test(insertid)){
		$("#p4").html("아이디는 5자이상 영문소문자, 숫자,특수문자(_)만 사용 가능합니다.");
			
		}else{
			
		
		$.ajax({
			url : "/member/checkId.kh",
			type : "get",
			data : {"insertid" : insertid},
			success : function(data){
				if(data != ""){
					var str2 = "<span class='error'>["+data+"] 이미 사용중인 아이디 입니다.</span>";
					$("#p4").html(str2)
				}else{
					var str = "<span class='ok'>이 아이디는 사용 가능합니다</span>"
					$("#p4").html(str)
				}
				console.log("연결 성공")
			},
			error : function(){
				console.log("서버 연결에 실패")
			}
			
		})
		}
	})

java

@ResponseBody
	@RequestMapping(value="/member/checkId.kh" , method = RequestMethod.GET)
	public String checkMemberId(
			@RequestParam(value = "insertid" ,required = false) String insertid) {
		//mapper에서 돌릴건지 controller에서 리스트를 모두 가져와서 돌릴건지? 여기서
		//여기서 돌리면 해당 아이디값도 반환할 수 있음 / ka0ka0ka는 사용중인 아이디입니다.
		List<Member> mList = mService.searchAllMember();
		for(Member mOne : mList) {
			if(mOne.getMemberId().equals(insertid)) {
				return insertid;
			}
		}
		return null;
	}

1. keyup을 사용해 키가 입력될때마다 데이터를 컨트롤러로 보내 유효성을 체크하도록 구성 .on("input",function(){ 도 keyup과 같은 효과를냄
2. 정규표현식으로 1차 체크를 한 후 정규표현식에 부합했을때 ajax로 넘어가도록 설계
3. 컨트롤단으로 넘어간 데이터는 mapper에서 가저온 Member List와 비교하여 이미 사용중인 아이디를 발견하였을 때는 return으로 보내줘서 비동기로 확인할 수 있게끔 함