[자바스크립트/jQuery] 제이쿼리, 정규식을 활용한 이메일과 비밀번호 유효성 검사

 

소개

 

이메일과 비밀번호를 입력하는 웹페이지가 있다는 가정하에 양식을 제출하기 전에 jQuery를 사용하여 사용자 입력의 유효성을 검사한다고 가정해 보겠습니다. 특히 사용자가 특정 기준을 충족하는 유효한 이메일 주소와 암호를 입력했는지 확인하려고 합니다.

 

이를 위해 양식에서 제출 이벤트를 수신하는 jQuery 함수를 작성한 다음 이메일 및 비밀번호 입력 필드의 값을 확인합니다. 필드가 비어 있거나 지정된 기준을 충족하지 않는 경우 함수는 오류 메시지를 표시하고 양식이 제출되지 않도록 합니다.

 

 

728x90

 

코드

 

$(document).ready(function() {
  // 양식에서 제출 이벤트 수신
  $('form').submit(function(event) {
     // 이메일 및 비밀번호 입력 필드의 값 가져오기
    var email = $('#email').val();
    var password = $('#password').val();

    // 필드가 비어 있거나 지정된 기준을 충족하지 않는지 확인
    if (email === '' || !isValidEmail(email)) {
      displayError('올바른 이메일 주소를 입력하세요');
      event.preventDefault();
    } else if (password === '' || !isValidPassword(password)) {
      displayError('대소문자와 숫자를 혼합하여 최소 8자 이상의 비밀번호를 입력하세요.');
      event.preventDefault();
    }
  });

  // 이메일 주소를 확인하는 도우미 기능
  function isValidEmail(email) {
    // 이 정규식은 이메일 주소의 기본 형식과 일치합니다.
    var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailRegex.test(email);
  }

  // 비밀번호를 확인하는 도우미 기능
  function isValidPassword(password) {
    // 이 정규 표현식은 길이가 8자 이상이고 대소문자와 숫자가 혼합된 비밀번호와 일치합니다.
    var passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/;
    return passwordRegex.test(password);
  }

  // 오류 메시지를 표시하는 도우미 함수
  function displayError(message) {
    $('#error-message').text(message);
    $('#error-message').show();
  }
});

 

반응형

 

이 코드에서 submit 함수는 양식에서 submit 이벤트를 수신하는 데 사용됩니다.

isValidEmail 및 isValidPassword 함수는 정규식을 사용하여 이메일 및 비밀번호 필드가 지정된 기준을 충족하는지 확인합니다. displayError 함수는 두 필드 중 하나가 유효하지 않은 경우 오류 메시지를 표시합니다.

 

아래 함수들에는 각각 올바른 이메일 형식과, 비밀번호 형식을 판단하는 정규식이 들어 있습니다.

해당 정규식을 통해 이메일의 기본적인 형식, 예를 들면 test1234@naver.com 같은 형식인지 판단합니다.

비밀번호 또한, 대문자와 소문자를 혼합한 8자리 이상인지 판단해 주는 정규식입니다.

 

전반적으로 이 코드는 jQuery를 사용하여 양식에 유효성 검사를 추가하여, 잘못된 입력에 대한 즉각적인 피드백을 제공하여 사용자 환경을 개선합니다.