ID, PW 입력 시 로그인 버튼 활성화 기능 구현하기

멘토님께서 미션 5도 함께 해보는것이 좋다고 하셔서 한번에 진행했다.

---

Mission 5 | ID, PW validation
현재 id, pw 입력 시 무조건 로그인 버튼이 활성화 외어 있도록 구현이 되어 있습니다.
실제 로그인 하는 경우를 생각하며 validation(유효성 검사) 기능을 추가해주세요.
ex) id >>> '@' 포함 / pw >>> 5글자 이상

---

일단 id의 value 값과 pw의 값을 확인한 후 두개 다 조건을 만족했을 때 버튼이 활성화되고

addEventListener의 click과 keyup event를 써서 로그인 버튼을 누르면 main 페이지로 넘어가게 만들고 싶었다.

 

먼저 DOM으로 필요한 값들을 불러냈다.

const idForm = document.getElementById("name");
const pwForm = document.getElementById("password");
const loginButton = document.getElementById("button");

if 문의 조건으로 3가지 조건을 나열해주었다.

indexOf로 @를 찾고(없으면 -1이 return되기 때문에 !==-1로 썼다.)

조건이 맞다면 버튼 색을 활성화시켜준다.

disabled는 해당 요소가 비활성화되었는지 확인하는 속성이다.

function changeColor() {
if (
    idValue.length > 0 &&
    idValue.indexOf("@") !== -1 &&
    pwValue.length >= 5
  ) {
    loginButton.style.backgroundColor = "#0095f6";
    loginButton.disabled = false;
  } else {
    loginButton.style.backgroundColor = "#cae0f9";
    loginButton.disabled = true;
  }
  return;
}

로그인 버튼을 누르면 메인페이지로 이동할 수 있도록 링크를 함수에 넣어주었고

addEventListener에 각각 적용해주었다.

function moveLink() {
  location.replace("main.html");
}

idForm.addEventListener("keyup", changeColor);
pwForm.addEventListener("keyup", changeColor);
loginButton.addEventListener("click", moveLink);

아래는 전체 코드 내용이다.

const idForm = document.getElementById("name");
const pwForm = document.getElementById("password");
const loginButton = document.getElementById("button");

function changeColor() {
  let idValue = idForm.value;
  let pwValue = pwForm.value;

  if (
    idValue.length > 0 &&
    idValue.indexOf("@") !== -1 &&
    pwValue.length >= 5
  ) {
    loginButton.style.backgroundColor = "#0095f6";
    loginButton.disabled = false;
  } else {
    loginButton.style.backgroundColor = "#cae0f9";
    loginButton.disabled = true;
  }
  return;
}

function moveLink() {
  location.replace("main.html");
}

idForm.addEventListener("keyup", changeColor);
pwForm.addEventListener("keyup", changeColor);
loginButton.addEventListener("click", moveLink);