[javascript] 자바스크립트를 이용한 비밀번호 유효성 검사 기능 구현하기

08 Dec 2023

javascript

비밀번호는 보안상의 이유로 일정한 규칙에 맞춰 설정해야 합니다. 자바스크립트를 사용하여 비밀번호가 유효한지를 검사하는 기능을 구현해보겠습니다.

구현 방법

1. HTML 폼 구성하기

<form>
  <label for="password">비밀번호:</label>
  <input type="password" id="password">
  <button type="button" onclick="validatePassword()">확인</button>
  <p id="passwordError" style="color: red;"></p>
</form>

이 예시에서는 비밀번호 입력을 받는 폼을 구성합니다. 입력된 비밀번호의 유효성을 검사할 때 사용할 함수를 호출하는 버튼을 추가합니다.

2. 자바스크립트로 유효성 검사 함수 작성하기

function validatePassword() {
  var password = document.getElementById('password').value;
  var passwordError = document.getElementById('passwordError');
  
  if (password.length < 8) {
    passwordError.textContent = '비밀번호는 최소 8글자 이상이어야 합니다.';
  } else if (!/[a-z]/.test(password) || !/[A-Z]/.test(password) || !/[0-9]/.test(password)) {
    passwordError.textContent = '비밀번호는 영문 대문자, 영문 소문자, 숫자를 모두 포함해야 합니다.';
  } else {
    passwordError.textContent = '';
    // 유효한 비밀번호 처리 로직 추가
  }
}

이 함수는 입력된 비밀번호가 유효한지를 검사하여 각각의 조건에 맞게 오류 메시지를 표시합니다.

3. 스타일링

비밀번호 유효성 검사 결과를 표시하는 스타일을 지정할 수 있습니다.

#passwordError {
  color: red;
  font-size: 0.8em;
}

결론

이제 웹 애플리케이션에서 사용자가 설정한 비밀번호의 유효성을 검사하고, 각각의 조건에 맞게 오류 메시지를 표시해주는 기능을 구현할 수 있습니다. 이를 통해 사용자가 안전한 비밀번호를 설정할 수 있도록 도와줄 수 있습니다.