Spring 회원가입양식 만들기(Ajax를 활용한 비동기 방식)(1)

- 목차 -

(1) 이름(닉네임) 중복 검사

(2) 아이디 중복 검사

(3) 비밀번호 확인

 

pom.xml

※(Spring에서 Ajax를 사용하기 위해 추가할 maven은 아래와 같습니다.)

		<!-- Ajax사용하기 -->
		<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
		<dependency>
		    <groupId>com.fasterxml.jackson.core</groupId>
		    <artifactId>jackson-databind</artifactId>
		    <version>2.12.3</version>
		</dependency>
		<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-core -->
		<dependency>
		    <groupId>com.fasterxml.jackson.core</groupId>
		    <artifactId>jackson-core</artifactId>
		    <version>2.12.3</version>
		</dependency>
		<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-annotations -->
		<dependency>
		    <groupId>com.fasterxml.jackson.core</groupId>
		    <artifactId>jackson-annotations</artifactId>
		    <version>2.12.3</version>
		</dependency>

 

 

(1) 이름(닉네임) 중복 검사

HTML5

<tr>
  <th>
  	<label for="username">이&emsp;름</label>
  </th>
  <td>
    <input id="username" type="text" name="sm_name" placeholder="이름을 설정해주세요." maxlength="8" title="8자 까지 입력" required autofocus/>
    <span class="point successNameChk">이름은 2자 이상 8자 이하로 설정해주시기 바랍니다.</span>
    <input type="hidden" id="nameDoubleChk"/>
  </td>
</tr>

※nameDoubleChk은 유효성 검사를 하기 위해 추가하였습니다.

 

 

JavaScript(jQuery)

    $("#username").blur(function(){
    	var sm_name = $("#username").val();
    	if(sm_name == "" || sm_name.length < 2){
    		$(".successNameChk").text("이름은 2자 이상 8자 이하로 설정해주세요 :)");
			$(".successNameChk").css("color", "red");
			$("#nameDoubleChk").val("false");
    	}else{
    		$.ajax({
				url : '${pageContext.request.contextPath}/nameCheck?sm_name='+ sm_name,
				type : 'post',
				cache : false,
				success : function(data) {
					if (data == 0) {
						$(".successNameChk").text("사용가능한 이름입니다.");
						$(".successNameChk").css("color", "green");
						$("#nameDoubleChk").val("true");
					} else {
						$(".successNameChk").text("사용중인 이름입니다 :p");
						$(".successNameChk").css("color", "red");
						$("#nameDoubleChk").val("false");
					}
				}, error : function() {
					console.log("실패");
				}
			});
    	}
    });

※nameDoubleChk에 true OR false로 값을 저장해줍니다.

 

 

Controller

(Ajax를 사용할 때는 @ResponseBody 꼭 있어야 합니다.)

	@RequestMapping(value = "/nameCheck", method = RequestMethod.POST)
	@ResponseBody
	public int nameCheck(@RequestParam("sm_name") String sm_name) {
		return testService.nameCheck(sm_name);
	}

※중복된 이름이 있냐 없냐는 해당 이름이 몇개가 있는지 int값으로 결과값을 반환할거기 때문에 반환 타입을 int로 잡아줍니다.

 

 

Service

	public int nameCheck(String sm_name) {
		return testDAO.nameCheck(sm_name);
	}

 

 

DAO

	public int nameCheck(String sm_name) {
		return sqlSession.selectOne("test.nameCheck", sm_name);
	}

 

 

Mapper

	<select id="nameCheck" resultType="integer">
		select count(*) from smember where sm_name =#{sm_name}
	</select>

 

결과

입력하기전

동일한 이름 사용시

사용가능한 이름

 

 

(2) 아이디 중복 검사

HTML5

<tr>
	<th>
		<label for="userid">아이디</label>
	</th>
	<td>
		<input id="sm_id" type="text" name="sm_id" placeholder="아이디를 입력해주세요." required maxlength="10"/>
		<span class="point successIdChk"></span><br/>
		<span class="point">※ 영문자, 소문자 입력가능, 최대 10자 까지 입력</span>
		<input type="hidden" id="idDoubleChk"/>
	</td>
</tr>

※idDoubleChk은 유효성 검사를 하기 위해 추가하였습니다.

---

(방식은 이름 중복확인하는 것과 동일합니다. HTML에서 지정해준 아이디 값과 클래스값만 바꿔주면 됩니다.)

 

JavaScript(jQuery)

※idDoubleChk에 true OR false로 값을 저장해줍니다.

 

Controller

Service

DAO

Mapper

---

 

결과

입력전 화면

중복된 아이디 입력시

사용가능한 아이디 입력시

 

 

(3) 비밀번호 확인

HTML5

<tr>
	<th>
		<label for="userpass">비밀번호</label>
	</th>
	<td>
		<input id="userpass" type="password" name="sm_pw"  required maxlength="8" autocomplete="off"/>
		<span class="point">※ 비밀번호는 총 8자 까지 입력가능</span>
	</td>
</tr>
<tr>
	<th>
		<label for="userpasschk">비밀번호 확인</label>
	</th>
	<td>
		<input id="userpasschk" type="password" name="sm_pw_chk" placeholder="동일하게 입력해주세요." required maxlength="8" autocomplete="off"/>
		<span class="point successPwChk"></span>
		<input type="hidden" id="pwDoubleChk"/>
	</td>
</tr>

※pwDoubleChk은 유효성 검사를 하기 위해 추가하였습니다.

 

 

JavaScript(jQuery)

	//비밀번호 확인
	$("#userpasschk").blur(function(){
		if($("#userpasschk").val() == $("#userpass").val()){
			$(".successPwChk").text("비밀번호가 일치합니다.");
			$(".successPwChk").css("color", "green");
			$("#pwDoubleChk").val("true");
		}else{
			$(".successPwChk").text("비밀번호가 일치하지 않습니다.");
			$(".successPwChk").css("color", "red");
			$("#pwDoubleChk").val("false");
		}
	});

※pwDoubleChk에 true OR false로 값을 저장해줍니다.

 

 

결과

비밀번호 입력

비밀번호가 다를 때

비밀번호가 같을 때

 

 

다음 포스팅에서는 이메일 인증에 대해서 다루겠습니다.