[JavaScript]정규식

[JavaScript]정규식

정규식이란 문자를 검사할 때 사용하는 식이다. 예를 들어 문자 속에 특정 문자가 포함되어 있는지 확인할 수 있다. 정규식을 사용해 test() 함수로 검사할 수 있다. 검사 결과는 참/거짓으로 돌아온다.

정규식 문법

일반적으로 개발자는 정규식 문법을 외워서 사용하지 않고 사용할 때마다 검색하여 찾아서 사용한다. 그 중에 핵심적인 문법만 외워두자.

위 규칙을 사용하여 다양한 정규식을 만들 수 있다.

// 이메일 정규식
/^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;

// 비밀번호 정규식 - 특수문자, 문자, 숫자 포함 형태의 8~15자리 이내의 암호 정규식
//^.*(?=^.{8,15}$)(?=.*\d)(?=.*[a-zA-Z])(?=.*[!@#$%^&+=]).*$/;

// 핸드폰번호 정규식
/^\d{3}-\d{3,4}-\d{4}$/;

// 전화번호 정규식
/^\d{2,3}-\d{3,4}-\d{4}$/;

 

로그인 창 정규식 적용하기

    <div class="black-bg">
        <div class="white-bg">
            <p>로그인 하세요.</p>
            <form action="login.php">
                <div class="form-group">
                  <input type="email" class="form-control" id="email">
                  <p id="email-alert">이메일이 빈칸입니다.</p>
                </div>
                <div class="form-group">
                  <input type="password" class="form-control" id="pwd">
                  <p id="pwd-alert">비밀번호가 빈칸입니다.</p>
                </div>
                <button type="submit" class="btn btn-primary">전송</button>
                <button class="btn btn-danger" id="close">닫기</button>
              </form>
        </div>
    </div>

        var isEmail = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;
        var isPass = /^.*(?=^.{8,15}$)(?=.*\d)(?=.*[a-zA-Z])(?=.*[!@#$%^&+=]).*$/;

        $("form").on("submit",function(e){
            if(isEmail.test($("#email").val()) == false){
                e.preventDefault(); // 폼의 전송을 막는다.
                $("#email-alert").show();
            }
            if(isPss.test($("#pwd").val()) == false){  
                e.preventDefault(); // 폼의 전송을 막는다.
                $("#pwd-alert").show();
            }
        });