[javascript] 자바스크립트를 활용한 로그인 폼 검증 기능 구현하기

08 Dec 2023

javascript

로그인 폼의 입력 값이 올바른지를 확인하는 기능은 많은 웹 어플리케이션에서 필수적입니다. 이번 글에서는 자바스크립트를 사용하여 간단한 로그인 폼 검증 기능을 구현하는 방법을 알아보겠습니다.

폼 요소와 이벤트 핸들러

우선, HTML 파일에 로그인 폼을 작성하고 각 입력 필드에 대한 id를 추가합니다.

<form id="loginForm">
  <input type="text" id="username" placeholder="사용자 이름">
  <input type="password" id="password" placeholder="비밀번호">
  <button type="submit">로그인</button>
</form>

다음으로, 자바스크립트 파일을 만들고 이벤트 핸들러를 사용하여 폼 제출(submit) 시에 검증 함수를 호출하도록 합니다.

document.getElementById('loginForm').addEventListener('submit', function(event) {
  event.preventDefault();
  validateForm();
});

폼 검증 함수 구현

이제 폼 검증 함수인 validateForm 함수를 작성해보겠습니다. 이 함수는 입력 값이 유효한지 확인하고, 유효하지 않으면 적절한 오류 메시지를 표시합니다.

function validateForm() {
  const username = document.getElementById('username').value;
  const password = document.getElementById('password').value;

  if (username.trim() === '' || password.trim() === '') {
    alert('사용자 이름과 비밀번호를 입력해주세요.');
    return false;
  }

  // 여기에 추가적인 검증 로직을 구현할 수 있습니다. (예: 비밀번호 길이, 특수문자 포함 등)

  // 유효할 경우 로그인 처리
  alert('로그인 성공!');
  return true;
}

결론

이제 간단한 자바스크립트 코드를 통해 로그인 폼의 입력 값을 검증하는 기능을 구현했습니다. 이제 이 코드를 웹 어플리케이션에 통합하여 사용자들이 올바른 입력 값을 제출할 수 있도록 도와줄 수 있습니다.