[JS] propertychange change keyup paste input 이용하여 유효성 검사

회원가입

회원가입을 할 때 닉네임이 사용되고 있는 닉네임인지 확인하는 유효성검사를 일반적으로는 submit을 하여 db에 접근을 하여 처리를 한다. 이번 프로젝트에서는 다르게 실시간으로 입력을 할 때 db에 접근을 하여 알림을 뜨게 하였다.

사용자가 입력을 할 때 마다 db에 접근을 한다.

 

 

 

 

                                                       (usertbl 테이블의 nickname 컬럼)

 

 

—> usertbl 테이블에 nickname 컬럼에 검색을 하고 결과를 보여준다.

$('.nickname_input').on( "propertychange change keyup paste input",
				function() {
					var nickname = $('.nickname_input').val();
					var data = {
						nickname : nickname
					}
					$.ajax({
						type : "post",
						url : "/member/memberNickChk",
						data : data,
						success : function(result) {
							if (result == 'success') {
							
								nickname_check = true;
								$('.nickname_check').css('display', 'none');
								$('.nick_input_re_2').css("display", "none");
								$('.nick_input_re_1').css("display",
										"inline-block");

							}
							if (nickname.length == 0) {
								$('.nick_input_re_1').css("display", "none");
								$('.nick_input_re_2').css("display", "none");
								$('.nickname_check').css('display',
										'inline-block');
								nickname_check = false;
							}

							if (result == 'fail') {
								$('.nick_input_re_1').css("display", "none");
								$('.nickname_check').css('display', 'none');
								$('.nick_input_re_2').css("display",
										"inline-block");

							}
							if(nickname!=""){
								$('.delete').css("display", "inline-block");
								
							}
							if(nickname==""){
								$('.delete').css("display", "none");
							}

						}//success;
					}); // ajax;

				});// function 종료

ajax를 이용하여 Controller에 memberNickChk로 보낸다.

// 닉네임
		@RequestMapping(value = "/memberNickChk", method = RequestMethod.POST)
		@ResponseBody
		public String memberNickChkPOST(String nickname) throws Exception{
			
			int result = memberservice.nickCheck(nickname);
			
			if(result != 0) {
				
				return "fail";	// 중복 닉네임 존재
				
			} else {
				
				return "success";	// 중복 닉네임 없음
				
			}	
			
		} // memberNickChk() 종료

Controller → Service

@Override
	public int nickCheck(String nickname) throws Exception {
		// TODO Auto-generated method stub
		return membermapper.nickCheck(nickname);
	}

Service → mapper

<!-- 닉네임 중복 검사 -->
 	<select id="nickCheck" resultType="int">
 		select count(*) from userTbl where nickname = #{nickname}
 	</select>

Controller —> service → membermapper(query문으로 db 접근) → 결과 (0 or 1)

일단 순서는 이렇게 된다.

Controller에서 Service를 호출하고 Service에서는 membermapper를 통해 db에 접근하여 쿼리문을 던진다.

쿼리문을 통하여 같은 nickname이 몇명이나 있는지 알 수 있다. Controller에서는 0이면 sucess, 1이면 fail을 return 해주고 그 결과에 따라서 css를 표시해준다.

이렇게 "propertychange change keyup paste input"을 사용하면 input에 입력되는 값을 실시간으로 값을 처리를 할 수 있다.

"propertychange change keyup paste input"기능을 사용할 때 특이사항이 있었다.

처음에는 하나의 js, css, html을 나눠서 코드를 작성하였는데,

js파일을 나눠서 "propertychange change keyup paste input"기능을 사용하니 인식을 못하였다.

버전문제인지, 잘 모르겠지만 그래서 css만 나눠서 작성을 했다.