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

- 목차 -

(1) 이용약관 및 개인정보 취급방침

(2) 유효성 검사

 

회원가입시 가입자가 모든 양식에 정상적으로 입력을 했는지, 서비스를 제공하는 사람, 즉 관리자가 원하는 정보를 모두 입력을 했는지 확인하는 검사는 회원가입에서 어떻게 보면 가장 중요한 기능이라고 생각합니다. 앞서 아이디 중복검사, 이메일 인증, 문자 인증을 진행하며 인증 완료시 값을 readonly로 바꾸는 작업도 어떻게 보면 일종의 유효성 검사라고 볼 수 있습니다. 가입자가 인증 후에 다른 정보로 바꿔치기 한다면 큰일 나니깐요...ㅎㅎ

 

그리고 개인 정보를 저장하는 만큼 가입자의 개인 정보를 저장 및 사용한다는 내용 또한 있어야겠죠? 이용약관과 개인정보 취급방침등 법적으로 문제가 생기지 않으려면 최초 가입시 이와 관련된 정보를 가입자에게 제공을 하고 동의를 하게끔 해야 나중에 혹시 모를 만일의 사태에 대비할 수 있겠죠? 유효성 검사를 하기 전에 이와 관련하여 간단한 작업을 먼저 해주고 유효성 검사를 해보도록 하겠습니다.

 

(1) 이용약관 및 개인정보 취급방침

HTML5

<fieldset class="fieldarea f2">
	<legend><span>이용</span>약관</legend>
	<p class="agreeText">
		<label for="agreement1">아래 사항에 동의 합니다.</label>
		<input id="agreement1" type="checkbox" name="agreement1"/>
		<textarea id="text1" readonly>
			이용약관
		</textarea>
	</p>
</fieldset>
<fieldset class="fieldarea f3">
	<legend><span>개인정보</span>취급방침</legend>
	<p class="agreeText">
		<label for="agreement2">아래 사항에 동의 합니다.</label>
		<input id="agreement2" type="checkbox" name="agreement2"/>
		<textarea id="text2" readonly>
			개인정보 방침 및 안내
		</textarea>
	</p>
</fieldset>

※fieldset은 위의 개인정보를 입력하는 filedset과 다른 filedset을 만들었습니다.

 

 

JavaScript(jQuery)

//체크박스 체크여부
$("input:checkbox").click(checkedChange);
   function checkedChange() {
       if($(this).prop("checked")){
           $("label[for="+this.id+"]").text("동의되었습니다.");
           $("label[for="+this.id+"]").css("color","blue");
       }else{
           $("label[for="+this.id+"]").text("동의 해주시기 바랍니다.");
           $("label[for="+this.id+"]").css("color","red");
       }
   }

※클릭했을 때 동의했다는 내용을 text로 찍어줍니다. 만일 체크를 해제하면 동의를 해달라는 내용이 뜨게 해줍니다.

 

 

결과

체크하기 전

 

체크한 후

이용약관과 방침 내용은 상황에 맞게 채워주시면 됩니다.

 

 

(2) 유효성 검사

HTML5

<div class="btnCenter">
	<input type="submit" id="button1" value="등록하기" title="등록하기 버튼"/>
	<input type="reset" id="button2" value="다시쓰기" title="다시쓰기 버튼"/>
</div>

 

 

 

JavaScript(jQuery)

    //최종 틍록하기 버튼 클릭시 각 부분별 입력값 맞는지 확인
    $("#button1").click(function(){
	    if($("#agreement1").prop("checked") && $("#agreement2").prop("checked") && $("#nameDoubleChk").val() == "true" && $("#idDoubleChk").val() == "true" && $("#pwDoubleChk").val() == "true" && $("#emailDoubleChk").val() == "true" && $("#phoneDoubleChk").val() == "true"){
	    	alert($('#sm_id').val()+"님 환영합니다. 선택해주셔서 감사합니다 :)");
	    }else{
	    	alert("회원가입을 완료할 수 없습니다. 다시한번 확인해주십시오.");
	    	if(!$("#agreement1").prop("checked")){
	    		$("label[for=agreement1]").text("동의 해주시기 바랍니다.");
	    		$("label[for=agreement1]").css("color","red");
	    	}
	    	if(!$("#agreement2").prop("checked")) {
	    		$("label[for=agreement2]").text("동의 해주시기 바랍니다.");
	    		$("label[for=agreement2]").css("color","red");
	    	}
	    	if($("#nameDoubleChk").val() != "true"){
	    		$(".successNameChk").text("이름를 입력해주세요 :)");
				$(".successNameChk").css("color", "red");
	    	}
	    	if($("#idDoubleChk").val() != "true"){
	    		$(".successIdChk").text("아이디를 입력해주세요 :)");
				$(".successIdChk").css("color", "red");
	    	}
	    	if($("#pwDoubleChk").val() != "true"){
	    		$(".successPwChk").text("비밀번호가 일치하지 않습니다 :)");
				$(".successPwChk").css("color", "red");
	    	}
	    	if($("#emailDoubleChk").val() != "true"){
	    		$(".successEmailChk").text("이메일 인증을 완료해주세요 :)");
				$(".successEmailChk").css("color", "red");
	    	}
	    	if($("#phoneDoubleChk").val() != "true"){
	    		$(".successPhoneChk").text("휴대폰 인증을 완료해주세요 :)");
				$(".successPhoneChk").css("color", "red");	    		
	    	}
	    	return false
	    }    	    	
    });

※submit을 눌렀을 때 모든 값이 들어왔는지 확인해주는 작업을 합니다. 이전 작업에서 success뭐Chk라는 input에 true 또는 false라는 값을 저장하게 했습니다. 이를 토대로 true인지 false인지, false라면 return false로 컨트롤러로 가지 못하게 막아줍니다.

 

혹은 reset버튼을 눌렀다면 기본적으로 모든 값을 초기 상태로 돌려주기는 하지만 임의적으로 기능을 만들어준 부분은 따로 추가 작업을 해줄 수 있게 해줬습니다.

JavaScript(jQuery)

$("#button2").click(function(){
    	$("#nameDoubleChk").val("false");
    	$("#idDoubleChk").val("false");
    	$("#emailDoubleChk").val("false");
    	$("#phoneDoubleChk").val("false");
    	$("#sm_email").attr("readonly",false);
    	$("#phone").attr("readonly",false);
    });

 

 

결과

처음 회원가입 페이지 접속

 

아무 정보 입력 없이 등록하기 버튼 눌렀을 때

 

유효성 검사 결과(통과X)

 

유효성 검사 결과(통과O)

 

회원가입한 아이디로 로그인

 

 

이렇게 회원가입시 필요한 기본적인 기능에 대해 진행해봤습니다.

간단하게 만들어도 되긴 하겠지만 이왕 만드는거 진짜 회원가입 페이지처럼 만들어보고 싶다는 생각이

여기까지 오게만든거 같습니다;; ㅎㅎ

 

이메일인증과, 문자인증 서비스를 해보고 싶었거든요😋

 

궁금하신 부분이나 진행시 잘 안되는 부분이 있다면 댓글 부탁드립니다~