[ JS / AJAX ] 아이디 형식 검사 (여기서 this를 사용하지 않는 이유)
2024. 6. 3. 12:30ㆍ· FRONT-END/└ JS
환경 : Visual Studio Code / Spring Tools Suite4
참고 모델 : 네이버
이 글에서...
- NNNNN은 아이디로 사용할 수 없는 코드
- NNNNY은 아이디로 사용할 수 있는 코드
1. (스프링) 아이디 중복 검사 코드 작성
먼저 백엔드 코드를 작성하는 것이 좋다.
- AjaxRestController.java
//@Controller //사용자에게 화면을 전송하는 컨트롤러
@CrossOrigin //외부에서의 비동기 통신을 허용하는 설정
@RestController //사용자에게 데이터를 전송하는 컨트롤러(화면x)
public class AjaxRestController {
@Autowired
private MemberDao memberDao;
@RequestMapping("/checkId")
public String checkId(@RequestParam String memberId) {
MemberDto memberDto = memberDao.selectOne(memberId);
if(memberDto == null) { //DB에 회원 아이디가 없는 경우(null인 경우)
return "NNNNY";//사용 가능한 경우(DB에 없는 경우)
}
else {
return "NNNNN";//사용 불가능한 경우(DB에 있는 경우)
}
}
}(+) 아이디가 있는 경우 → 중복에 대한 메시지 출력.
(+) 아이디가 없는 경우 → 사용 가능 메시지 출력.
(+) 아이디가 정규표현식 조건에 맞지 않는 경우 → 사용 불가능한 아이디에 대한 메시지 출력.
(+) MemberDto에 정보를 조회하기 위해 memberDao의 memberId를 가지고 조회하는 selectOne 메소드를 가져와 확인
2. (html) 사용자에게 보여지고, 비동기 통신을 할 코드 구현
- id-check.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript 예제</title>
<!-- 구글 폰트 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap" rel="stylesheet">
<!-- 내가 구현할 스타일 -->
<link rel="stylesheet" type="text/css" href="../css/commons.css">
<link rel="stylesheet" type="text/css" href="../css/test.css">
<!-- font awesome 아이콘 CDN -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
</style>
<!-- jquery cdn -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<!-- 내가 만든 스크립트 추가(jQuery를 사용했으니 jQuery CDN 아래 작성) -->
<script src="commons.js"></script>
<!-- javascript를 의도적으로 head 자리에 배치해서 가장 먼저 실행되도록 구현 -->
<script type="text/javascript">
$(function(){
var state = {
memberIdValid : false
};
$("[name=memberId]").blur(function(){
var regex = /^[a-z][a-z0-9]{7,19}$/;
state.memberIdValid = regex.test($(this).val());
if(state.memberIdValid) { //아이디 형식 검사를 통과했다면
$.ajax({
url : "http://localhost:8080/checkId?memberId="+$(this).val(),
success : function(response) {
console.log(response);
if(response == "NNNNN"){
$(this).removeClass("success fail fail2").addClass("fail2");
}
else if(response = "NNNNY") {
$(this).removeClass("success fail fail2").addClass("success");
}
}
});
}
else {//아이디가 형식검사를 통과하지 못했다면
$(this).removeClass("success fail fail2").addClass("fail");
}
});
});
</script>
</head>
<body>
<div class="container w-500">
<div class="cell center">
<h1>아이디 중복 검사</h1>
</div>
<div class="cell">
<input type="text" name="memberId" class="tool w-100">
<div class="success-feedback">사용 가능한 아이디입니다.</div>
<div class="fail-feedback">아이디는 8~20자 영문소문자와 숫자로 작성하세요.</div>
<div class="fail2-feedback">아이디가 이미 사용중입니다.</div>
</div>
</div>
</body>
</html>
3. 실행결과 확인
아이디 입력에 따른 안내 창이 올바르게 출력되지 않음
왜 일까?
바로 this 때문이다.
this가 가르키는 바가 정확하지 않아서 발생하는 것이다. 즉, 뜻이 모호해서이다.
- > 따라서 this를 사용하지 않고 정확하게 지정해주면 해결된다.
4. 오류 해결
$(function(){
var state = {
memberIdValid : false
};
$("[name=memberId]").blur(function(){
var regex = /^[a-z][a-z0-9]{7,19}$/;
state.memberIdValid = regex.test($(this).val());
if(state.memberIdValid) { //아이디 형식 검사를 통과했다면
$.ajax({
url : "http://localhost:8080/checkId?memberId="+$(this).val(),
success : function(response) {
//console.log(response);
if(response == "NNNNN"){
$("[name=memberId]").removeClass("success fail fail2").addClass("fail2");
state.memberIdValid = false;
}
else if(response = "NNNNY") {
$("[name=memberId]").removeClass("success fail fail2").addClass("success");
state.memberIdValid = true;
}
}
});
}
else {//아이디가 형식검사를 통과하지 못했다면
$("[name=memberId]").removeClass("success fail fail2").addClass("fail");
state.memberIdValid = false;
}
});
}); (+) state.memberIdValid 의 값을 주는 이유는 코딩을 하는 사람이 이해하기 쉽게 하기 위해서이다.
즉, 가독성을 위해 넣은 코드. 사용하지 않아도 무방
5. 실행결과 확인
그런데, 이 get 방식을 바꿔주려고 한다. (매번 주소를 친다는 것 자체가 편리하지 않음)
-> 이를 ajax 에서 url, method, data, success 속성으로 분리하여 처리해주면 편하다.
6. url, 전송방식, 데이터, 응답 함수 지정
// url : "http://localhost:8080/checkId?memberId="+$(this).val(),
url : "http://localhost:8080/checkId",
method : "post", //전송방식(get/post)
data : {
memberId : value
},
success : function(response) { <script type="text/javascript">
$(function(){
var state = {
memberIdValid : false
};
$("[name=memberId]").blur(function(){
var regex = /^[a-z][a-z0-9]{7,19}$/;
var value = $(this).val();
if(regex.test(value)) { //아이디 형식 검사를 통과했다면
$.ajax({
// url : "http://localhost:8080/checkId?memberId="+$(this).val(),
url : "http://localhost:8080/checkId",
method : "post", //전송방식(get/post)
data : {
memberId : value
},
success : function(response) {
//console.log(response);
if(response == "NNNNN"){
$("[name=memberId]").removeClass("success fail fail2").addClass("fail2");
state.memberIdValid = false;
}
else if(response = "NNNNY") {
$("[name=memberId]").removeClass("success fail fail2").addClass("success");
state.memberIdValid = true;
}
}
});
}
else {//아이디가 형식검사를 통과하지 못했다면
$("[name=memberId]").removeClass("success fail fail2").addClass("fail");
state.memberIdValid = false;
}
});
});
</script>
7. 실행결과 확인
(+) post 방식으로 전달되고 있는 것이 확인 가능하다.
(+) 이처럼 설정이 가능한 이유는 requestMapping으로 만들어 놨기 때문이다
개인 공부 기록용입니다:)
728x90
'· FRONT-END > └ JS' 카테고리의 다른 글
| JSON이란??? (1) | 2024.06.05 |
|---|---|
| [ JS / AJAX ] 게시판 좋아요 구현 (0) | 2024.06.04 |
| [ JS / AJAX ] 비동기 통신을 간단히 구현해보자 (1) | 2024.06.02 |
| [ AJAX ] 웹의 동기/비동기 통신 (0) | 2024.06.01 |
| [ JavaScript / jQuery ] 클래스 명을 활용하여 진행 바(progressbar) 구현 (0) | 2024.05.31 |