Devlog

1차프로젝트-로그인창 JS구현

생각한대로 2023. 11. 8. 16:20

 

 

 

어제 회원가입창의 동적요소를 구현완료하고

오늘은 이미 만들어놓은 로그인창의 동적요소를 구현하였다.

 

일단 내가 생각한 기능은

회원가입창과 마찬가지로 형식제한이나 글자수 제한을 넣고 싶었다.

그리고 로그인에 성공하면

메인화면으로 이동하는 기능까지 계획했다.

 

일단 회원가입창에 구현했던 이 코드를 불러와서

var password = document.getElementById("password").value;
   if (password.length < 8) {
          alert("비밀번호는 최소 8자 이상이어야 합니다.");
          return false;
        }

 

 

여기서 alert문을 빼고

 

const loginId = document.getElementById('loginId');
const loginPw = document.getElementById('loginPw');
const loginBtn = document.getElementById('loginBtn')

 

각 ID, PW, loginBtn을 선언해준뒤

 

if((loginId.value.length>5 && loginId.value.indexOf("@")!==-1) 
        && loginPw.value.length>=8){

 

일단은 이런식으로 

조건만 달아보았다.

 

id의 value 값은 5자 초과        &&(and)

"@"인덱스 포함                      &&(and)

loginPw의 글자수는 8자이상

 

를 의미하는 코드를 짜봤다.

 

근데 로그인 기능중에

올바른형식이 아니면 로그인하는 버튼을 비활성화시키는 기능을 알게되어 추가해보았다.

 

function color() {
    if((loginId.value.length>5 && loginId.value.indexOf("@")!==-1) 
        && loginPw.value.length>=8){
        loginBtn.style.backgroundColor = "#F13737";
        loginBtn.disabled = false;
    }else{
        
        loginBtn.style.backgroundColor = "#F8C9C9";
        loginBtn.disabled = true;
    }
}

 

 

코드를 정의하자면 아까 위에서 정의한 조건에 맞지않으면 버튼의 색깔을 기존과 다르게 설정 함과 동시에 비활성화되는 코드인 것이다.

 

backgroundColor 는 프로젝트시 컨벤션한 color로 지정했고,

비활성화될때는 정한 색보다 옅어지게 설정하였다.

 

이게 로그인창의 첫화면이다.

 

하지만 위에 조건대로 input에 제대로된 값을 넣지않으면 이런식으로 비활성화 되고, 비활성화된것처럼 보이게 구현하였다.

 

 

앞으로 이런류의 조건에 맞지않으면 비활성화되는 코드는 유용할꺼같아 정리해놓고 자주 쓸 예정이다.

 

#엘리스트랙 #엘리스트랙후기 #리액트네이티브강좌 #온라인코딩부트캠프 #온라인코딩학원 #프론트엔드학원 #개발자국비지원 #개발자부트캠프 #국비지원부트캠프 #프론트엔드국비지원 #React #Styledcomponent #React Router Dom #Redux #Typescript #Javascript

반응형