[24주 1일차] 회원가입시 유효성검사

 

 

Member.java

	@PostMapping("/checkMemberId")
	public ResponseEntity<String> checkMemberId(@RequestBody String memberId) {
	    int count = memberService.countByMemberId(memberId);
	    if (count > 0) {
	        return ResponseEntity.ok("exists"); // 이미 존재하는 회원 ID
	    } else {
	        return ResponseEntity.ok("available"); // 존재하지 않는 회원 ID
	    }
	}

 

 

 

CreateMember.jsp

<div class="form-group row">
    <label class="col-sm-2 control-label">회원ID</label>
    <div class="col-sm-3">
        <form:input path="memberId" id="username" name="username" class="form-control" />
        <div id="usernameMessage"></div>
    </div>
</div>
<div class="form-group row">
    <label class="col-sm-2 control-label">비밀번호</label>
    <div class="col-sm-3">
        <form:input path="password" name="password" class="form-control" />
        <div id="passwordMessage"></div>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- 아이디 유효성 검사 -->
<script>
$(document).ready(function() {
    $('#username').on('blur', function() {
        var memberId = $(this).val();

        // 입력된 memberId가 5글자 이상인지 확인
        if (memberId.length < 5) {
            $('#usernameMessage').html('<span style="color:red;">회원 ID는 5글자 이상이어야 합니다.</span>');
            return; // 5글자 미만이면 AJAX 호출을 하지 않음
        }

        $.ajax({
            type: "POST",
            url: "/waguwagu/member/checkMemberId",
            contentType: "text/plain",
            data: memberId,
            success: function(response) {
                if (response === "exists") {
                    $('#usernameMessage').html('<span style="color:red;">이미 사용 중인 회원 ID입니다.</span>');
                } else {
                    $('#usernameMessage').html('<span style="color:green;">사용 가능한 회원 ID입니다.</span>');
                }
            },
            error: function(xhr, status, error) {
                console.error(xhr.responseText);
            }
        });
    });
});
</script>

<script>
$(document).ready(function() {
    $('#password').on('blur', function() {
        var password = $(this).val();

        // 입력된 비밀번호가 5글자 이상이고 특수 문자를 포함하는지 확인
        if (password.length < 5 || !/[!@#$%^&*(),.?":{}|<>]/.test(password)) {
            $('#passwordMessage').html('<span style="color:red;">비밀번호는 5글자 이상이어야 하며, 특수 문자를 포함해야 합니다.</span>');
        } else {
            $('#passwordMessage').html(''); // 조건에 충족할 경우 메시지 삭제
        }
    });
});

</script>