[Spring][커뮤니티 사이트]회원 가입(2) - 정규 표현식(유효성 검사)

아이디 와 닉네임 부분입니다.

먼저 ID 부분 입니다.

---

Mapper.Xml(Oracle DB)

<!-- id중복검사 -->
<select id="IdCheck" resultType="int">
	<![CDATA[
		select count(*) from member
		where id = #{id}
	]]>
</select>

---

Controller

	//id중복검사
	@PostMapping("/IdCheck")
	@ResponseBody
	public String IdCheck(String id) {
		log.info("idCheck...." + id);
		
		int result = service.IdCheck(id);
		//값이 존재한다면
		if(result != 0 ) {
			return "fail";
		}else{
        //존재하지 않는다면
			return "success";
		}
	}

ajax를 사용하기에 ResponseBody 어노테이션을 사용해주었으며, 만약 아아디가 존재하면 fail 이라는 값을 리턴,

존재하지 않는다면 success 값을 리턴 하게 하였습니다.

---

Service&DAO

Service
	//id 중복검사
	@Override
	public int IdCheck(String id) {
		return dao.IdCheck(id);
	}
    
 DAO
 	//id중복검사
	@Override
	public int IdCheck(String id) {
		return session.selectOne("mapper.member.IdCheck",id);
	}

---

JSP

<div class="textForm">아이디
   <input type="text"  name="id" id="id" class="id_input" placeholder="아이디를 입력해주세요.">
   <span class="id_input_re_1">사용 가능한 아이디입니다.</span>
   <span class="id_input_re_2">아이디가 이미 존재합니다.</span>
   <span class="id_input_re_3">한글로는 생성 불가능 합니다.</span>
   <span class="id_input_re_4">5~15자 사이로 가능합니다.</span>

 </div>

앞서 ID부분에 대한 div 태그입니다.

이후 span class 에 맞는 css를 추가시켜줍니다.

---

CSS

/* 중복아이디 존재하지 않는경우 */
.id_input_re_1 {
	color: green;
	display: none;
}
/* 중복아이디 존재하는 경우 */
.id_input_re_2 {
	color: red;
	display: none;
}
/* 아이디 정규표현식에 안맞는경우 */
.id_input_re_3 {
	color: red;
	display: none;
}
/* 아이디 길이가 안맞는경우 */
.id_input_re_4 {
	color: red;
	display: none;
}

이런식으로 아이디가 존재하지않으면 초록글씨 그 외 빨간글씨로 나오게 css를 만들었습니다

---

JS

//id 정규표현식(5~15자의 영문자 또는 숫자)
function idFormCheck(id){
	var idExp = /^(?=.*[a-z0-9])[a-z0-9]{5,15}$/;
	return idExp.test(id);
}

우선 정규표현식의 함수를 만들어 줍니다.

주석에 적은 것 처럼 5~15자 영문자 또는 숫자 로 만들 수 있게 하였습니다.

var idCheck = false;

그다음 유효성 검사에 대한 변수를 하나 선언해줍니다.

//id 중복검사
$('.id_input').on('propertychange change keyup paste input',function(){
	var id = $('.id_input').val();
	
	$.ajax({
		type : 'post',
		url : '${path}/member/IdCheck',
		data : {id : id},
		success : function(result){
			if(result != 'fail'){
				$('.id_input_re_1').css("display","block");
				$('.id_input_re_2').css("display","none");	
				$('.id_input_re_3').css("display","none");	
				$('.id_input_re_4').css("display","none");	
				idCheck = true;
			}else{
				$('.id_input_re_1').css("display","none");	
				$('.id_input_re_2').css("display","block");
				$('.id_input_re_3').css("display","none");	
				$('.id_input_re_4').css("display","none");	
				idCheck = false;
			}
			if(idFormCheck(id) == false){
				$('.id_input_re_1').css("display","none");	
				$('.id_input_re_2').css("display","none");	
				$('.id_input_re_3').css("display","block");
				$('.id_input_re_4').css("display","none");	
				idCheck = true;
			}
			 if(id.length < 4 || id.length > 20){
				$('.id_input_re_1').css("display","none");	
				$('.id_input_re_3').css("display","none");	
				$('.id_input_re_2').css("display","none");	
				$('.id_input_re_4').css("display","block");
				idCheck = true;
			}

		},
		error : function(error){
			console.log(error);
		}
	});//end ajax
});

이후 ajax를 통해 구현해줍니다.

우선 'propertychange change keyup paste input' 를 선언해준 이유는 input 태그에 입력이 되는순간 자동으로 이벤트를 감지해주는 변화 감지기 역활을 합니다.

이후 Controller에서 return값으로 fail,success를 선언한것과 정규표현식 함수를 토대로 조건문을 만들어 줍니다.

1.만약 존재한다면 class='id_input_re_1 css'의 글씨를 나오게 하며 그외 클래스는 글씨가 나오지 않게 합니다.

2.바로 뒤 else 는 존재하지 않는경우

3~4 정규표현식에 맞지 않는경우

결과 화면

---

닉네임 부분입니다

Mapper.XML(Oracle DB)

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

---

Controller

	//닉네임 중복검사
	@PostMapping("/NickCheck")
	@ResponseBody
	public String NickCheck(String nickname) {
		log.info("NicknameCheck.."+nickname);
		
		int result = service.NickCheck(nickname);
		
		if(result != 0 ) {
			return "fail";
		}else {
			return "success";
		}
	}

id와 동일합니다

---

Service&DAO

Service
	//닉네임 중복
	@Override
	public int NickCheck(String nickname) {
		return dao.NickCheck(nickname);
	}
    
 DAO
 	//닉네임중복검사
	@Override
	public int NickCheck(String nickname) {
		return session.selectOne("mapper.member.NickCheck",nickname);
	}vv

---

화면,스크립트 는 id와 동일합니다

JSP

<div class="textForm">닉네임
  <input type="text" name="nickname" id="nickname" class="nickname_input" placeholder="닉네임을 입력해주세요.">
  <span class="nick_input_re_1">사용 가능한 닉네임입니다.</span>
  <span class="nick_input_re_2">닉네임이 이미 존재합니다.</span>
  <span class="nick_input_re_3">특수문자를 사용하실 수 없습니다.</span>
  <span class="nick_input_re_4">2~10자 사이로 가능합니다.</span>
</div>

CSS

/* 중복닉네임 존재하지 않는경우 */
.nick_input_re_1 {
	color: green;
	display: none;
}
/* 중복닉네임 존재하는 경우 */
.nick_input_re_2 {
	color: red;
	display: none;
}
/* 닉네임 정규표현식 안맞는경우 */
.nick_input_re_3 {
	color: red;
	display: none;
}
/* 닉네임 길이에 안맞는경우 */
.nick_input_re_4 {
	color: red;
	display: none;
}

JS

//닉네임 정규표현식(한글,영어,숫자 2~16자)
function nickFormCheck(nickname){
	var nickExp = /^(?=.*[a-z0-9가-힣])[a-z0-9가-힣]{2,10}$/;
	return nickExp.test(nickname);
}

닉네임 정규표현식은 한글,영어,숫자 길이2~16자로 구성되어있습니다.

var nickCheck = false;

유효성 검사 변수 선언

//닉네임 중복검사
$('.nickname_input').on('propertychange change keyup paste input',function(){
	var nickname = $('.nickname_input').val();
	
	$.ajax({
		type : 'post',
		url : '${path}/member/NickCheck',
		data : {nickname : nickname},
		success : function(result){
			if(result != 'fail'){
				$('.nick_input_re_1').css("display","block");
				$('.nick_input_re_2').css("display","none");	
				$('.nick_input_re_3').css("display","none");	
				$('.nick_input_re_4').css("display","none");	
				nickCheck = true;
			}else{
				$('.nick_input_re_1').css("display","none");	
				$('.nick_input_re_2').css("display","block");
				$('.nick_input_re_3').css("display","none");	
				$('.nick_input_re_4').css("display","none");	
				nickCheck = false;
			}
			if(nickFormCheck(nickname) == false){
				$('.nick_input_re_1').css("display","none");	
				$('.nick_input_re_2').css("display","none");	
				$('.nick_input_re_3').css("display","block");
				$('.nick_input_re_4').css("display","none");	
				nickCheck = true;
			}
			if(nickname.length < 2 || nickname.length > 10){
				$('.nick_input_re_1').css("display","none");	
				$('.nick_input_re_2').css("display","none");	
				$('.nick_input_re_3').css("display","none");	
				$('.nick_input_re_4').css("display","block");
				nickCheck = true;
			}
		},
		error : function(error){
			console.log(error);
		}
	});//end ajax
})

ajax 또한 id와 같습니다.

결과화면

이상입니다~
다음글은 비번,휴대번호 정규표현식에 관한 글입니다.