[JavaScript / jQuery] 정규식으로 이메일, 비밀번호 검증하는 기능 만들기

💡 실습 포인트!

• 이번 실습에서는 정규식으로 이메일과 비밀번호를 검증하는 기능을 만들었는데 고려해야하는 것들이 생각보다 많았다.
  • 입력한 아이디가 이메일 형식이 아닌데 전송을 누르면 "이메일 형식의 아이디가 아닙니다." 라는 문구의 경고창 띄우기
  • 입력한 비밀번호가 8자리 미만이거나 16자리 초과라면 비밀번호 입력창 아래에 해당 경고 문구 띄우고 수정해서 변경되면 해당 상태에 맞는 경고 문구를 띄우거나 없애기
  • 입력한 비밀번호 자리 수가 조건 범위(8~16자리)를 벗어난 상태에서 전송을 누르면 각 상태에 해당하는 문구의 경고창 띄우기
  • 입력한 비밀번호 자리 수가 조건 범위(8~16자리)에 해당할지라도 특수문자와 숫자, 영문 조합이 아니라면 해당 내용을 담은 경고창 띄우기
  • 모든 조건을 만족했을 때 전송완료페이지로 접속하기
• 이외에도 이것저것 눌러보다가 발견하는 아쉬운 점들을 보완했다.
  • 닫기 버튼을 눌렀다가 다시 로그인 버튼을 눌렀을 때 이전에 입력했던 내용이 남아있지 않도록!
  • 닫기 버튼을 눌렀다가 다시 로그인 버튼을 눌렀을 때 이전에 비밀번호 입력할 때 떴던 경고 문구가 뜨지 않도록!

 

---

💜 HTML

<div class="black-bg">
    <div class="white-bg">
        <h4>로그인하세요</h4>
        <form action="success.html">
            <div class="my-3">
                <input type="text" class="form-control" id="email" placeholder="이메일 형식의 아이디를 입력하세요.">
            </div>
            <div class="my-3">
                <input type="password" class="form-control" id="password" placeholder="영문, 숫자, 특수문자를 최소 한 가지씩 조합하여 8~16자리 비밀번호를 입력하세요.">
                <div id="pw-text1">비밀번호가 8자리 미만입니다.</div>
                <div id="pw-text2">비밀번호가 16자리 초과입니다.</div>
            </div>
            <button type="submit" class="btn btn-primary" id="submit">전송</button>
            <button type="button" class="btn btn-danger" id="close">닫기</button>
        </form> 
    </div>
</div>

💜 CSS

.black-bg {
  width: 100%;
  height: 100%;
  position: fixed;
  background: rgba(0, 0, 0, 0.6);
  z-index: 5;
  padding: 30px;
  visibility: hidden; /* 애니메이션 줄 때 display: none 대용, 없애는 게 아니라 모습만 숨김 */
  opacity: 0;
  transition: all 0.5s;
}

.white-bg {
  background: white;
  border-radius: 5px;
  padding: 30px;
}

#pw-text1,
#pw-text2 {
  color: red;
  font-weight: bold;
  margin-top: 5px;
  font-size: 12px;
}

💜 JavaScript

$('#close').on('click', function(){
    $('#email').val('');
    $('#password').val('');
    $('#pw-text1').hide();
    $('#pw-text2').hide();
    $('.black-bg').eq(0).toggleClass('show');
})

function isEmail(asValue) {
    var regExp = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i;

    return regExp.test(asValue);
}

function isPassword(asValue) {
    var regExp = /^(?=.*[a-zA-z])(?=.*[0-9])(?=.*[$`~!@$!%*#^?&\\(\\)\-_=+]).{8,16}$/;

    return regExp.test(asValue);
}

$('#submit').on('click', function(e){
    if($('#email').val() == '') {
        e.preventDefault();
        alert('아이디를 입력하세요.');
    } else if(!isEmail($('#email').val())) {
        e.preventDefault();
        alert('이메일 형식의 아이디가 아닙니다.');
    }

    if ($('#password').val() == '') {
        e.preventDefault();
        alert('비밀번호를 입력하세요.');
    } else if ($('#password').val().length < 8 || $('#password').val().length > 16) {
        e.preventDefault();
        alert('비밀번호는 8~16자리여야 합니다.');
    } else if(!isPassword($('#password').val())) {
        e.preventDefault();
        alert('영문, 숫자, 특수문자를 최소 한 가지씩 조합하여 8~16자리 비밀번호를 입력하세요.');
    }
})

$('#pw-text1').hide();
$('#pw-text2').hide();

$('#password').on('input', function(){
    if($('#password').val() != ''){
        if($('#password').val().length < 8){
            $('#pw-text1').show();
            $('#pw-text2').hide();
        } else if ($('#password').val().length > 16){
            $('#pw-text1').hide();
            $('#pw-text2').show();
        } else {
            $('#pw-text1').hide();
            $('#pw-text2').hide();
        }
    } else {
        $('#pw-text1').hide();
        $('#pw-text2').hide();
    }
})

• 정규식의 경우 깔끔한 사용을 위해 따로 함수로 만들어두고 필요한 부분에 넣어 사용했다.
• 아이디, 비밀번호, 이메일, 전화번호 등 로그인 관련 기능을 만들다보면 정규식이 필요할 때가 있는데, 감사하게도 마침 자주 쓰는 정규식을 깔끔하게 정리하여 모아두신 분이 계셔서 그 분의 사이트를 참고했다.

JavaScript 자주 쓰는 정규식 모음 (아이디, 이메일, 비밀번호, 전화번호,...)