항공사 플랫폼 팀 프로젝트_회원가입 비밀번호 확인 AJAX 통신

회원가입시 비밀번호 확인 AJAX 통신 구현

jsp

<c:choose>
    <c:when test="${joinFormDto != null}">
        <div class="password--wrap">
            비밀번호 <input type="password" name="password" required="required" id="password">
            <div class="validation--check">
                <c:if test="${valid_password != null}">
                    ${valid_password}
                </c:if>
            </div>
            비밀번호 확인 <input type="password" required="required" id="password--check">
        </div>
    </c:when>
    <c:otherwise>
        <div class="password--wrap">
            비밀번호 <input type="password" name="password" required="required" id="password">
        </div>
    </c:otherwise>
</c:choose>

 

 

js

// 비밀번호 확인 기능
$("#password--check").on("keyup focus change", function() {
   let password = $("#password").val();
   let passwordCheck = $("#password--check").val();
   let passwordWrap = $(".password--wrap");
   let divNode = $("<div>");
   let divNode2 = $("<div>");
   divNode.attr("class", validation--check");
   divNode2.attr("class", "password--validation");
   
   if(password != passwordCheck) {
       $(".validation--check").empty();
       $(".password--validation").empty();
       divNode.text("비밀번호가 일치하지 않습니다.");
       passwordWrap.append(divNode);
   } else {
       $(".validation--check").empty();
       $(".password--validation").empty();
       divNode2.text("비밀번호가 일치합니다.");
       passwordWrap.append(divNode2);
   }
});