JAVA 팀플) 20240205

 

항상 그렇듯 월요일은 주말이 끼어있기 때문에 여러가지가 수정되었다.

1. SSN의 int타입 변경

SSN이 int타입에서 String타입으로 변경되었다.

DB도 수정했다.

 

2. 아이디 중복 확인, 비밀번호 찾기 자식창의 엔터키 이벤트 지정

// 엔터 키 누를 때 확인 버튼 클릭

$("#confirmForm").keydown(function (event) {

if (event.which == 13) { // 13: 엔터 키의 keyCode

event.preventDefault(); // 기본 엔터 동작 방지

$("#check_answer").click(); // 확인 버튼 클릭

}

});

 

 

 

 

3. 로그인 메인의 쿠키를 통한 아이디 저장 기능

// 아이디 저장 체크박스 상태에 따라 쿠키 생성

if ($("#userIdSave").prop("checked")) {

var userId = $("#userId").val();

//쿠키 유효기간 1일, 경로 지정은 보류(WEB-INF/member/Login/loginMain.jsp)

document.cookie = "savedUserId=" + userId + "; expires=" + getCookieExpiration(1) + "; path=/";

}

//쿠키 만료일 지정

function getCookieExpiration(days) {

var date = new Date();

date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));

return date.toUTCString();

}

 

// 쿠키 불러오기

var savedUserId = getCookie("savedUserId");

 

// 쿠키를 이름으로 가져오는 함수

function getCookie(name) {

var cookies = "; " + document.cookie;

var parts = cookies.split("; " + name + "=");

if (parts.length == 2){ //쿠키에 유저 아이디가 있는 경우

return parts.pop().split(";").shift(); //찾는 쿠키를 세미콜론을 기준으로 기준으로 자르기

}

}

 

// 쿠키가 존재하면 아이디 입력란에 표시

if (savedUserId) {

$("#userId").val(savedUserId);

}

 

아이디 저장을 누르고 로그인 버튼을 눌렀으면 쿠키를 통해 아이디가 저장, 페이지 로딩 시 자동으로 입력된다.

 

 

 

 

 

 

4. 로그인 메인과 비밀번호 찾기 창에서 아이디 제약 추가

<form id="findPWForm" action="<%=request.getContextPath()%>/SearchPartPW" method="post">

아이디: <input type="text" class="must" id="userId" name="userId" pattern="[a-zA-Z0-9]{4,}" title="4자 이상의 영문 대소문자 또는 숫자를 입력하세요"><br>

이름: <input type="text" class="must" id="userName" name="userName"><br>

SSN: <input type="text" class="must" id="ssn1" name="ssn1" maxlength="6">

- <input type="password" class="must" id="ssn2" name="ssn2" maxlength="7"><br>

 

<input type="submit" value="확인">

</form>

 

 

//패턴 속성에 문구 삽입

$("#loginButton").on("click", function(){

console.log("Submit button clicked");

var inputValue = $("#userId").val();

 

// 유효한 경우 아무 동작도 하지 않음

if (/^[a-zA-Z0-9]+$/.test(inputValue)) {

$("#userId")[0].setCustomValidity('');

} else {

// 유효하지 않은 경우 오류 메시지를 직접 설정

$("#userId")[0].setCustomValidity('영문자 또는 숫자를 입력하세요.');

}

})

영문자 또는 숫자 외의 글자를 입력하고 확인을 누르면 경고창이 출력된다.