<body> <form class="login_container_box"> <h1 class="title" >westagram</h1> <div class="input"> <input type="text" id="ID" placeholder="전화번호, 사용자 이름 또는 이메일"/> <input type="password" id="password" placeholder="비밀번호"/> <button class="login_btn" type="button" disabled>로그인</button> </div> <p id="wrongPw">asdf</p> <span class="idk_pw">비밀번호를 잊으셨나요?</span> </form> <script src="js/login.js"></script> </body>
로그인 화면 HTML내용이다.
유효성 검사를 하기위해 disabled 속성을 넣어서 비활성화 시켰다. 비활성화 시에 색을 다르게 하여 특이점을 나타내기위해 opacity값을 css내부에 따로 할당하였다.
const inputId = document.querySelector("#ID"); const inputPassword = document.querySelector("#password"); const button = document.querySelector(".login_btn"); const loginBtn = () => { const idValue = inputId.value; const passwordValue = inputPassword.value; idValue.includes('@') && passwordValue.length >5 ? button.removeAttribute('disabled') : button.setAttribute('disabled','') } inputId.addEventListener('keyup', loginBtn); inputPassword.addEventListener('keyup', loginBtn);
아이디인풋,패스워드인풋,로그인버튼 각각 가지고있는 클래스명을 할당하는 변수 선언 => 로그인 버튼에 대한 함수 loginBtn선언=>
함수내부에서 아이디,비번값을 받아오는 변수 선언=> 각 값에조건 부여,두 조건 모두 만족할경우를 구하기위해 && 사용=>
삼항 연산자를 사용하여 (?=true)(:=false)
위의 조건이 만족할경우 버튼에 부여한 disabled속성 제거
(? button.removeAttribute('disabled'))
위의 조건이 불만족할경우 버튼에 disabled속성 세팅
(: button.setAttribute('disabled',''))
삼항 연산자 사용 부분을 여러 방법으로 도전 해봤다.
if(idValue.includes('@') && passwordValue.length >5){ button.disabled = false; button.style.cursor = "pointer"; button.style.opacity = '1'; }else { button.disabled = true; button.style.cursor = "default"; button.style.opacity = '0.4'; }
if(조건만족){
버튼disabled = 비활성화;
커서의 스타일 = 손가락모양 포인터;
투명도 = 1;
}조건 만족 X{
disabled=활성화;
커서의 스타일 = 화살표모양 기본 커서;
투명도 = 0.4;
}
? button.disabled = false : button.disabled = true
조건 만족시 disabled = 비활성화 (관련 속성 모두 비활성화(투명도))
조건 불만족시 disabled = 활성화 (관련 속성 모두 활성화(투명도))
느낀점
실제 서비스에서 사용자가 개인정보를 입력하면 데이터베이스에서 값이 일치하는지를 확인 후 활성화하는 방법을 사용할텐데 어떤식으로 정보를 불러오고 대조하는지 궁금하다.
함수 내부에 외부 인자의 값을 담는 변수를 선언 해야하는데
밖에 선언하고 왜 안되는지 고민했었다.
외부선언 변수와 내부선언 변수의 구분을 좀 더 명확이 할 필요성이 있다.
