[ IntelliJ ] SpringBoot JavaScript 활용 유효성 검사 ( 비밀번호 확인 )

 

 

 

 

사용 클래스 : Controller, Service, DTO, Entity

사용 인터페이스 : Service 구현, Repository

사용 DB : ORACLE

UI : HTML5, JavaScript, Thymeleaf

 

 

---

 

 

< Script code >

<script>
var isPwMatch = false;

$(document).ready(function () {
    $("#pw_check_btn").click(function () {
        var pw = $("#pw").val();
        var pwCheck = $("#pw_check").val();

        if(pw === "" || pwCheck === "") {
            alert("비밀번호를 모두 입력해주세요.");
            return;
        }

        $.ajax({
            type: "post",
            url: "/pwcheck",
            data: { "pw": pw, "pwCheck": pwCheck },
            success: function (data) {
                if(data === "match") {
                    $("#pw_check_msg").text("비밀번호가 일치합니다.").css("color", "green");
                    isPwMatch = true;
                } else {
                    $("#pw_check_msg").text("비밀번호가 일치하지 않습니다.").css("color", "red");
                    isPwMatch = false;
                    $("#pw_check").focus();
                }
            },
            error: function () {
                alert("서버 통신 중 오류가 발생했습니다.");
            }
        });
    });

    $("form").submit(function () {
        if(!isPwMatch) {
            alert("비밀번호가 일치하지 않습니다.");
            return false;
        }
    });
});
</script>

 

 

---

 

 

✅ 스크립트 큰 요약

$(document).ready(function () {
    $("#pw_check_btn").click(function () { ... });

    $("form").submit(function () { ... });
});

스크립트에서 이 두 개는 같은 열에 위치한다

둘은 각각의 역할이 있다

• $("#pw_check_btn").click(...) : 패스워드 확인 버튼 클릭 시 실행
• $("form").submit(...) : 폼 전송 시 실행

 

 

---

 

 

✅  스크립트 세부 요약 1

1️⃣

var isPwMatch = false;

• var : 변수를 선언할 때 쓰는 키워드 / JS에서 변수 만들 때 var, let, const 가 있다.
• isPwMatch = false : 초깃값으로 false를 지정한다.
  • 이유: 처음에는 비밀번호 일치 여부가 확인되지 않은 상태이기 때문이다.
  • AJAX에서 체크 후 일치하면 true 로 바뀐다.

즉, 폼 제출 전에 " 비밀번호가 일치하지 않는다 " 를 기본 설정으로 지정해 놓은 것이다.

 

 

2️⃣

$(document).ready(function () {}

• $ : jQuery 에서 사용하는 선택자 함수
  • $( "#pw" ) : id가 pw인 요소를 선택
  • $( " .class " ) : class 선택
• document : 현재 웹 페이지 전체 문서 객체
  • $( document ).ready( . . . ) : 문서가 다 로딩된 후 JS 실행
• function() { . . . } : JS 에서 함수 정의 / 이벤트 느
  • 특정 동작을 묶어서 실행할 수 있다

 

$(document).ready(function() { // 문서 로딩 끝나면 실행 });

 

 

3️⃣

$("#pw_check_btn").click(function () {
    var pw = $("#pw").val();
    var pwCheck = $("#pw_check").val();

id가 pw_check_btn인 것이 click 이벤트가 생기면 function이 작동한다

 

var pw 에는 패스워드란에 입력한 value값이 들어온다

var pwCheck 에는 패스워드 확인란에 입력한 value값이 들어온다 

.val(); value값을 읽거나 설정할 때 사용한다. 위 코드는 값 읽기 에 해당된다

 

 

4️⃣

if(pw === "" || pwCheck === "") {
    alert("비밀번호를 모두 입력해주세요.");
    return;
}

|| ( or 연산자 ) 를 통해서 pw, pwCheck 둘 중 하나라도 빈 문자열일 때, alert로 메시지 띄우고, 되돌린다.

 

즉, 두 개의 칸 모두 채워넣어야 하는 필수 입력란인 것이다.

나는 이를 부정조건문 이라고 부르고 싶다.

 

추가로 === 과 == 는 차이가 있다

• == : 값만 같으면 찬다 ( 자동 형변환 발생 가능성 ) 
• === : 값과 타입까지 같아야 찬다 ( 자동 형변환 방지 )

 

5️⃣

$.ajax({
    type: "post",
    url: "/pwcheck",
    data: { "pw": pw, "pwCheck": pwCheck },
    success: function (data) {
        if(data === "match") {
            $("#pw_check_msg").text("비밀번호가 일치합니다.").css("color", "green");
            isPwMatch = true;
        } else {
            $("#pw_check_msg").text("비밀번호가 일치하지 않습니다.").css("color", "red");
            isPwMatch = false;
            $("#pw_check").focus();
        }
    },
    error: function () {
        alert("서버 통신 중 오류가 발생했습니다.");
    }
});

위에 조건문( if )에서 무사히 입력이 다 되었다면 AJAX로 넘어온다

 

AJAX ( Asynchronous JavaScript And XML )

• 자바스크립트를 이용해서 페이지 새로고침하지 않고, 서버와 데이터를 주고받는 기술이다
• 비동기 ( Asynchronous ) : 요청하고 바로 화면 갱신하지 않아도 된다
• XML / JSON : 서버와 주고받는 데이터 형식

다시 코드로 돌아와서

• $.ajax({ . . . }); : $ 를 이용해서 ajax 사용
  • type : 매핑 타입
  • url : 어디로 데이터를 보낼 지에 대한 주소다
  • data : { 변수1 : pw, 변수2 : pwCheck }
    1. pw = 패스워드란 입력 데이터, pwCheck = 패스워드 확인란을 서버로 보낸다
    2. 입력창에 1234로 입력했다면 pw1234&pwCheck1234 이런식으로 보내지는 것
  • success : 서버 응답 성공 시 실행될 함. 즉, 서버가 내가 보낸 데이터에 응답하고 보낸 값이 data인 것이다.
    1. 서버에게 받은 데이터 값이 "mecth" 라는 문자열과 같을 경우 / isPwMatch = true;
    2. 서버에게 받은 데이터 값이 다른 경우 / isPwMatch = false;
    3. focus() 메서드는 id = pw_check인 입력창(패스워드 확인란)으로 커서를 옮긴다
    4. focus() 뒤에 .select() 메서드를 추가하면 해당 텍스트를 자동으로 파란색 드래그 선택해준다.

 

 

---

 

✅  스크립트 세부 요약 2

$("form").submit(function () {
    if(!isPwMatch) {
        alert("비밀번호가 일치하지 않습니다.");
        return false;
    }
});

form 태그에서 전송( submit )되려고 할 때 실행된다

• isPwMatch 는 ajax 성공 여부( 비밀번호 일치 / 불일치 )를 저장한 전역 변수였다
  • 조건문으로 데이터를 체크했을 때, 불일치 상태라면 메시지 띄우고, false 반환
• return false; 는 폼 제출을 막고, 이벤트를 중단시킨다

 

 

---

 

 

< Controller >

@PostMapping("/signup_save")
public String signup02(MemberDTO dto) {
    if(!dto.getPw().equals(dto.getPwcheck())) {
        return "member/signup";
    }

    service.save(dto);
    return "redirect:/";
}

@PostMapping("/pwcheck")
@ResponseBody
public String pwcheck(@RequestParam("pw") String pw,
                      @RequestParam("pwCheck") String pwCheck) {

    if(pw.equals(pwCheck)) {
        return "match";
    } else {
        return "nomatch";
    }
}

@ResponseBody 사용 이유 : 

• Spring MVC 에서는 기본적으로 String을 반환하면 그 값이 뷰 이름으로 처리가 된다
  • 뷰(view) : 사용자가 보는 화면 / JSP, HTML, Thymeleaf 등
  • 뷰 이름(view name) : JSP나 HTML 등의 파일 이름
• AJAX 에서는 "match" 같은 텍스트로 받아야 하기 때문에 @ ResponseBody 를 붙이면 HTTP 응답 바디에 그대로 들어간다
  • @Controller 말고 @RestController 를 사용하면 모든 메서드가 자동으로 @ResponseBody가 적용돼서 편리하

 

1. ajax 중 url 에 작성한 주소로 데이터를 @RequestParam을 통해 받아온다
2. 조건문 중 문자열 비교를 활용해서 pw과 pwCheck 문자열을 비교한다
3. 데이터 응답을 스크립트로 보내 마무리 처리한다

 

 

---

 

 

 

 

이제 출력을 해보면

 

 

 

 

---

 

 

 

 

비밀번호가 같을 때

비밀번호가 같지 않을 때

 

 

 

언젠가는 꾸미게 될 것이다..!