[개인프로젝트] 회원가입 자바스크립트 작성하기(5)

오늘은 이제 회원가입의 자바스크립트로 핸들링하는 부분을 진행했습니다. 막상 하면 재미있는데, 하는 데까지 마음먹기가 쉽지가 안군요ㅠ

일단 오늘 진행했던 코드들 입니다.

const joinButton = document.querySelector(".join");
const loginWrapper = document.querySelector(".login-wrapper");
const joinWrapper = document.querySelector(".join-wrapper");
const hiddenIdName = "hidden";
const joinForm = document.querySelector(".join-form");
const joinId = document.querySelector(".join-form > input:nth-child(1)");
const joinPassword = document.querySelector(".join-form > input:nth-child(2)");
const joinPasswordChk = document.querySelector(".join-form > input:nth-child(3)");

function onJoin(){
    console.log("clickEvent");
    joinWrapper.removeAttribute("id");
    loginWrapper.setAttribute("id", hiddenIdName);
}
function onJoinSubmit(e){
    e.preventDefault();
    if(joinId.value.trim() === `` || joinPassword.value.trim() === `` || joinPasswordChk.value.trim() === ``){
        alert("입력하신 정보를 확인해주세요.");
    }else if( joinPassword.value !== joinPasswordChk.value){
        alert("비밀번호가 다릅니다");
    }else{
        localStorage.setItem("userName" , joinId.value);
        localStorage.setItem("userPassworld" , joinPassword.value);
        alert("회원가입이 완료 되었습니다");
        location.reload();
    }
}

joinButton.addEventListener("click", onJoin);
joinForm.addEventListener("submit",onJoinSubmit);

 

현재 코드는 이런 식으로 진행을 했습니다. 좀 더 쉬운 이해를 위해 join화면을 보자면..

먼저 submit을 눌렀을 때 바로 onJoinSubmit함수를 호출하게 지정을 했습니다. 해당 함수의 부분은 사용자가 입력한 값의 유효성을 검증하고 로컬스토리지에 저장하는 부분을 담당합니다. 간단하게 설명을 하자면..

• e.preventDefault() 명령어를 통해 새로고침이 되는 현상을 방지한다.
• input 태그들의 공란이 있는지 체크하고, 공란이 있을 경우 alert 호출
• 비밀번호와 비밀번호 확인이 같은지 확인함
• 마지막으로 로컬 스토리지에 저장

마지막 테스트를 해보니, 아이디와 비번이 잘 저장되는 것을 확인했습니다~내일은 회원가입 한 부분을 로그인하는 부분과, 게시판 쪽 레이아웃을 짜는 부분을 진행해야겠네요~ 감사합니다~