개발일지/Java + Spring

[Spring] 회원정보 수정 중 비밀번호 변경체크(문제)

연습용365 2021. 12. 9. 23:39
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<%@ include file="/WEB-INF/views/include/head.jsp" %>
<script type="text/javascript">
$(document).ready(function() {

   $("#btnUpdate").on("click", function() {
      
      // 모든 공백 체크 정규식
      var emptCheck = /\s/g;
      // 영문 대소문자, 숫자로만 이루어진 4~12자리 정규식
      var idPwCheck = /^[a-zA-Z0-9]{4,12}$/;
            
      if($.trim($("#userPwd1").val()).length <= 0)
      {
         alert("비밀번호를 입력하세요.");
         $("#userPwd1").val("");
         $("#userPwd1").focus();
         return;
      }
      
      if(emptCheck.test($("#userPwd1").val())) 
      {
         alert("비밀번호는 공백을 포함할 수 없습니다.");
         $("#userPwd1").focus();
         return;
      }
      
      if()
      
      if (!idPwCheck.test($("#userPwd1").val())) 
      {
         alert("비밀번호는 영문 대소문자와 숫자로 4~12자리 입니다.");
         $("#userPwd1").focus();
         return;
      }
      
      if ($("#userPwd1").val() != $("#userPwd2").val()) 
      {
         alert("비밀번호가 일치하지 않습니다.");
         $("#userPwd2").focus();
         return;
      }
      
      if($.trim($("#userName").val()).length <= 0)
      {
         alert("사용자 이름을 입력하세요.");
         $("#userName").val("");
         $("#userName").focus();
         return;
      }
      
      if(!fn_validateEmail($("#userEmail").val()))
      {
         alert("사용자 이메일 형식이 올바르지 않습니다.");
         $("#userEmail").focus();
         return;   
      }
      
      /*
      //변수이용
      var oldPwd = "${user.userPwd}";
      if(oldPwd.val() == $("#userPwd1").val())
      {
    	  alert("비밀번호가 변경되지 않았습니다.");
    	  $("#userPwd1").focus();
    	  return;
      }
      */
      
      /*
      //위에 줘야 됨//하나만 줬을 때 올드와 뉴가 없지만 가능하다. 
      if($("#userPwd").val() == $("#userPwd1").val())
      {
    	  alert("비밀번호가 변경되지 않았습니다.");
    	  $("#userPwd1").focus();
    	  return;
      }
      */
      
      //값을 갖고 있는 것을 던져주는 것 //안에 있는 애가 세터 
      //값을 얻어와서 hidden 타입의 userPwd 아래에 넣어준다.
      $("#userPwd").val($("#userPwd1").val());
      
      
      //hidden을 이용하는 이유는 old를 서버로 보내기 위해서이다.
      //위에서 Pwd에 넣어놨기 때문에 Pwd1대신에 Pwd를 넣어도 된다.
      if($("#oldUserPwd").val() == $("#userPwd1").val())
      {
    	  alert("비밀번호가 변경되지 않았습니다.");
    	  $("#userPwd1").focus();
    	  return;
      }
      
      
      $.ajax({
			type:"POST",
			url:"/user/updateProc",
			data:{
				userId:$("#userId").val(),
				userPwd:$("#userPwd").val(),
				userName:$("#userName").val(),
				userEmail:$("#userEmail").val()
			},
			datatype:"JSON",
			beforeSend:function(xhr){
				xhr.setRequestHeader("AJAX", "true");
			},
			success:function(response)
			{
				if(response.code == 0)
				{ //받아 온 값이 0이면 
					alert("회원정보가 수정되었습니다.");
					location.href = "/board/list";
				}
				else if(response.code == 400)
				{
					alert("파라미터 값이 올바르지 않습니다.");
					$("#userPwd1").focus();
				}
				else if(response.code == 404)
				{
					alert("회원 정보가 없습니다.");
					location.href = "/";
				}
				else if(response.code == 500)
				{
					alert("회원정보 수정 중 오류가 발생했습니다.");
					$("#userPwd1").focus();
				}
				else
				{
					alert("회원정보 수정 중 오류가 발생했습니다.");
					$("#userPwd1").focus();
				}
			},
			complete:function(data)
			{
				icia.common.log(data);
			},
			error:function(xhr, status, error)
			{
				icia.common.error(error);
			}
      });
   });
});

function fn_validateEmail(value)
{
   var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
   
   return emailReg.test(value);
}
</script>
</head>
<body>
<%@ include file="/WEB-INF/views/include/navigation.jsp" %>
<div class="container">
    <div class="row mt-5">
       <h1>회원정보수정</h1>
    </div>
    <div class="row mt-2">
        <div class="col-12">
            <form>
                <div class="form-group">
                    <label for="username">사용자 아이디</label>
                    ${user.userId}
                </div>
                <div class="form-group">
                    <label for="username">비밀번호</label>
                    <input type="password" class="form-control" id="userPwd1" name="userPwd1" value="${user.userPwd}" placeholder="비밀번호" maxlength="12" />
                </div>
                <div class="form-group">
                    <label for="username">비밀번호 확인</label>
                    <input type="password" class="form-control" id="userPwd2" name="userPwd2" value="${user.userPwd}" placeholder="비밀번호 확인" maxlength="12" />
                </div>
                <div class="form-group">
                    <label for="username">사용자 이름</label>
                    <input type="text" class="form-control" id="userName" name="userName" value="${user.userName}" placeholder="사용자 이름" maxlength="15" />
                </div>
                <div class="form-group">
                    <label for="username">사용자 이메일</label>
                    <input type="text" class="form-control" id="userEmail" name="userEmail" value="${user.userEmail}" placeholder="사용자 이메일" maxlength="30" />
                </div>
                <input type="hidden" id="userId" name="userId" value="${user.userId}" />
                <input type="hidden" id="userPwd" name="userPwd" value="" />
                <input type="hidden" id="oldUserPwd" name="oldUserPwd" value="${user.userPwd}" />
                <button type="button" id="btnUpdate" class="btn btn-primary">수정</button>
            </form>
        </div>
    </div>
</div>
</body>
</html>

 

 

 

//hidden을 이용하는 이유는 old를 서버로 보내기 위해서이다.
//위에서 Pwd에 넣어놨기 때문에 Pwd1대신에 Pwd를 넣어도 된다.
if($("#oldUserPwd").val() == $("#userPwd1").val())
{
    alert("비밀번호가 변경되지 않았습니다.");
    $("#userPwd1").focus();
    return;
}

 

위치는 어디에 설정을 해야하는가?

$("#oldUserPwd").val()의 경우 어디에 위치해도 상관 없다.

비밀번호 체크 쪽으로 이동해도 상관 없음

 

return의 이유

프로그램이 실행된 뒤 빠져나가기 위해서 반드시 return을 해줘야 함

 

<input type="hidden" id="oldUserPwd" name="oldUserPwd" value="${user.userPwd}" />

value 값에 ${user.userPwd} 변수를 넣는 이유

페이지를 로딩 할 때 DB에 기록된 패스워드 값을 갖다놓는다. 

 

hidden 두개를 두고 올드와 뉴를 나눈 이유

DB의 입장에서 올드값이 필요할 때가 있기 때문인데 이 문제만 일회성으로 해결하려면 하나만 사용해도 된다고 함

 

 

      /*
      //변수이용
      var oldPwd = "${user.userPwd}";
      if(oldPwd.val() == $("#userPwd1").val())
      {
    	  alert("비밀번호가 변경되지 않았습니다.");
    	  $("#userPwd1").focus();
    	  return;
      }
      */
      
      /*
      //위에 줘야 됨//하나만 줬을 때 올드와 뉴가 없지만 가능하다. 
      if($("#userPwd").val() == $("#userPwd1").val())
      {
    	  alert("비밀번호가 변경되지 않았습니다.");
    	  $("#userPwd1").focus();
    	  return;
      }
      */