유효성 검사(정규식 활용)

최현석·2022년 10월 18일

JS&JQuery

목록 보기

1/1

🧩html

<body>
    <!-- 가입폼 시작 -->
    <form class="form-horizontal" name="join_form" id="join_form">
        <div class="form-group">
            <label for='user_id' class="col-md-2">아이디 <span class='identify'>*</span></label>
            <div class="col-md-10">
                <input type="text" name="user_id" id="user_id" class="form-control" />
            </div>
        </div>
        <div class="form-group">
            <label for='user_pw' class="col-md-2">비밀번호 <span class='identify'>*</span></label>
            <div class="col-md-10">
                <input type="password" name="user_pw" id="user_pw" class="form-control" />
            </div>
        </div>
        <div class="form-group">
            <label for='user_pw' class="col-md-2">비밀번호 확인 <span class='identify'>*</span></label>
            <div class="col-md-10">
                <input type="password" name="user_pw_re" id="user_pw_re" class="form-control" />
            </div>
        </div>
        <div class="form-group">
            <label for='user_name' class="col-md-2">이름 <span class='identify'>*</span></label>
            <div class="col-md-10">
                <input type="text" name="user_name" id="user_name" class="form-control" />
            </div>
        </div>
        <div class="form-group">
            <label for='email' class="col-md-2">이메일 <span class='identify'>*</span></label>
            <div class="col-md-10">
                <input type="email" name="email" id="email" class="form-control" />
            </div>
        </div>
        <div class="form-group">
            <label for='tel' class="col-md-2">연락처 <span class='identify'>*</span></label>
            <div class="col-md-10">
                <input type="tel" name="tel" id="tel" class="form-control" />
            </div>
        </div>
        <div class="form-group">
            <label for='gender1' class="col-md-2">성별 <span class='identify'>*</span></label>
            <div class="col-md-10">
                <label><input type='radio' name='gender' id='gender1' value='M'>남자</label>
                <label><input type='radio' name='gender' id='gender2' value='F'>여자</label>
            </div>
        </div>
        <div class="form-group">
            <label for='gender1' class="col-md-2">수강과목 <span class='identify'>*</span></label>
            <div class="col-md-10">
                <label><input type='checkbox' name='subject' id='subject1' value='html'>HTML</label>
                <label><input type='checkbox' name='subject' id='subject2' value='css'>CSS</label>
                <label><input type='checkbox' name='subject' id='subject3' value='js'>Javascript</label>
                <label><input type='checkbox' name='subject' id='subject4' value='jquery'>jQuery</label>
                <label><input type='checkbox' name='subject' id='subject7' value='php'>PHP</label>
            </div>
        </div>
        <div class="form-group">
            <div class="text-center">
                <button type="submit">가입하기</button>
                <button type="reset">다시작성</button>
            </div>
        </div>
    </form>

    <script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
    <!-- 정규표현식 검사 객체를 참조한다. -->
    <script src="regex.js"></script>
    <script type="text/javascript">
        $(function() {
            /** 가입폼의 submit 이벤트 */
            $("#join_form").submit(function(e) {
                // 기본동작 수행 방식
                e.preventDefault();

                /** 아이디 검사 */
                if (!regex.value('#user_id', '아이디를 입력하세요.')) { return false; }
                if (!regex.eng_num('#user_id', '아이디는 영어와 숫자 조합만 입력 가능합니다.')) { return false; }
                if (!regex.min_length('#user_id', 4, '아이디는 최소 4자 이상 입력 가능합니다.')) { return false; }
                if (!regex.max_length('#user_id', 20, '아이디는 최대 20자 까지만 입력 가능합니다.')) { return false; }

                /** 비밀번호 검사 */
                if (!regex.value('#user_pw', '비밀번호를 입력하세요.')) { return false; }
                if (!regex.min_length('#user_pw', 4, '비밀번호는 최소 4자 이상 입력 가능합니다.')) { return false; }
                if (!regex.max_length('#user_pw', 20, '비밀번호는 최대 20자 까지만 입력 가능합니다.')) { return false; }
                if (!regex.compare_to('#user_pw', '#user_pw_re', '비밀번호 확인이 잘못되었습니다.')) { return false; }
                
                /** 이름 검사 */
                if (!regex.value('#user_name', '이름을 입력하세요.')) { return false; }
                if (!regex.kor('#user_name', '이름은 한글만 입력 가능합니다.')) { return false; }
                if (!regex.min_length('#user_name', 2, '이름은 최소 2자 이상 입력 가능합니다.')) { return false; }
                if (!regex.max_length('#user_name', 20, '이름은 최대 20자 까지만 입력 가능합니다.')) { return false; }

                /** 이메일 검사 */
                if (!regex.value('#email', '이메일을 입력하세요.')) { return false; }
                if (!regex.email('#email', '이메일 주소가 잘못되었습니다.')) { return false; }

                /** 연락처 검사 */
                if (!regex.value('#tel', '연락처를 입력하세요.')) { return false; }
                if (!regex.phone('#tel', '연락처가 잘못되었습니다.')) { return false; }

                /** 성별검사 */
                if (!regex.check('input[name=gender]', '성별을 선택하세요.')) { return false; }
                if (!regex.check('input[name=subject]', '과목을 선택하세요.')) { return false; }

                /** 과목 검사 */
                if (!regex.check_min('input[name=subject]', 2, '과목은 2개 이상 선택하셔야 합니다.')) { return false; }
                if (!regex.check_max('input[name=subject]', 3, '과목은 최대 3개까지 선택 가능합니다.')) { return false; }

                // 처리 완료
                alert("입력형식 검사 완료!!!");
            });
        });
    </script>
</body>

🧩js

/**
 * 입력값의 검사를 수행하기 위한 객체
 */
var regex = {
    /**
     * 값의 존재 여부를 검사한다.
     * @param  {string} selector 입력요소의 css셀렉터
     * @param  {string} msg      값이 없을 경우 표시될 메시지
     * @return 입력된 경우 true / 입력되지 않은 경우 false
     */
    value: function(selector, msg) {
        var target = $(selector);           // 대상요소를 가져온다.
        if (!target.val()) {                // 값이 없다면?
            alert(msg);                     // 메시지 표시
            target.focus();                 // 대상요소에게 포커스 강제 지정
            return false;                   // 실패했음을 리턴
        }
        return true;                        // 성공했음을 리턴
    },

    /**
     * 입력값이 지정된 글자수를 초과했는지 검사한다.
     * @param  {string} selector 입력요소의 css셀렉터
     * @param  {int} len         최대 글자수
     * @param  {string} msg      값이 없을 경우 표시될 메시지
     * @return 초과하지 않은 경우 true / 초과한 경우 false
     */
    max_length: function(selector, len, msg) {
        var target = $(selector);           // 대상요소를 가져온다.
        if (target.val().length > len) {    // 입력값이 주어진 길이보다 크다면?
            alert(msg);                     // 메시지 표시
            target.val("");                 // 입력값을 강제로 지운다.
            target.focus();                 // 대상요소에게 포커스 강제 지정
            return false;                   // 실패했음을 리턴
        }
        return true;                        // 성공했음을 리턴
    },

    /**
     * 입력값이 지정된 글자수 미만인지 검사한다.
     * @param  {string} selector 입력요소의 css셀렉터
     * @param  {int} len         최대 글자수
     * @param  {string} msg      값이 없을 경우 표시될 메시지
     * @return 지정된 글자수 이상인 경우 true / 미만인 경우 false
     */
    min_length: function(selector, len, msg) {
        var target = $(selector);           // 대상요소를 가져온다.
        if (target.val().length < len) {    // 입력값이 주어진 길이보다 작다면?
            alert(msg);                     // 메시지 표시
            target.val("");                 // 입력값을 강제로 지운다.
            target.focus();                 // 대상요소에게 포커스 강제 지정
            return false;                   // 실패했음을 리턴
        }
        return true;                        // 성공했음을 리턴
    },

    /**
     * 체크박스나 라디오가 선택되어 있는지 검사한다.
     * @param  {string} selector 입력요소의 css셀렉터
     * @param  {string} msg      값이 없을 경우 표시될 메시지
     * @return 체크된 경우 true / 체크되지 않은 경우 false
     */
    check: function(selector, msg) {
        var checked = $(selector + ':checked'); // 대상요소중에서 선택된 항목들만 가져온다.
        if (checked.length < 1) {               // 선택된 항목의 길이가 1 미만이라면?
            alert(msg);                         // 메시지를 표시한다.
            $(selector).eq(0).focus();          // 첫 번째 요소에게 포커스 강제 지정
            return false;                       // 실패했음을 리턴
        }
        return true;                            // 성공했음을 리턴
    },

    /**
     * 체크박스나 라디오의 최소 선택 갯수를 검사한다.
     * @param  {string} selector 입력요소의 css셀렉터
     * @param  {int} min         최소 선택 갯수
     * @param  {string} msg      검사에 실패한 경우 표시할 메시지
     * @return 최소 수량 이상인 경우 true / 그렇지 않은 경우 false
     */
    check_min: function(selector, min, msg) {
        // 대상요소의 선택된 항목수가 주어진 min값 보다 작다면?
        if ($(selector + ':checked').length < min) {
            alert(msg);                 // 메시지 표시
            $(selector).eq(0).focus();  // 첫 번째 요소에게 포커스 강제 지정
            return false;               // 실패했음을 리턴
        }
        return true;                    // 성공했음을 리턴
    },

    /**
     * 체크박스나 라디오의 최대 선택 갯수를 검사한다.
     * @param  {string} selector 입력요소의 css셀렉터
     * @param  {int} max         최대 선택 갯수
     * @param  {string} msg      검사에 실패한 경우 표시할 메시지
     * @return 최대 수량 이하인 경우 true / 그렇지 않은 경우 false
     */
    check_max: function(selector, max, msg) {
        // 대상요소의 선택된 항목수가 주어진 max값 보다 크다면?
        if ($(selector + ':checked').length > max) {
            alert(msg);                 // 메시지 표시
            $(selector).eq(0).focus();  // 첫 번째 요소에게 포커스 강제 지정
            return false;               // 실패했음을 리턴
        }
        return true;                    // 성공했음을 리턴
    },

    /**
     * 두 요소의 입력값이 동일한지 검사한다.
     * @param  {string} origin  원본 요소의 selector
     * @param  {string} compare 검사 대상 요소의 selector
     * @param  {string} msg     검사에 실패할 경우 표시할 메시지
     * @return 동일한 경우 true / 다른 경우 false
     */
    compare_to: function(origin, compare, msg) {
        var src = $(origin);            // 원본요소를 가져온다.
        var dsc = $(compare);           // 검사 대상 요소를 가져온다.

        if (src.val() != dsc.val()) {   // 두 요소의 입력값이 다르다면?
            alert(msg);                 // 메시지 표시
            src.val("");                // 원본요소의 입력값 지움
            dsc.val("");                // 검사 대상의 입력값 지움
            src.focus();                // 원본 요소에게 포커스 강제 지정
            return false;               // 실패했음을 리턴
        }
        return true;                    // 성공했음을 리턴
    },

    /**
     * 입력값이 정규표현식을 충족하는지 검사한다.
     * @param  {string} selector   검사대상의 셀렉터
     * @param  {string} msg        표시할 메시지
     * @param  {object} regex_expr 검사할 정규표현식
     * @return 표현식을 충족할 경우 true / 그렇지 않을 경우 false
     */
    field: function(selector, msg, regex_expr) {
        var target = $(selector);       // 검사 대상을 가져온다.

        // 입력값이 없거나 입력값에 대한 정규표현식 검사가 실패라면?
        if (!target.val() || !regex_expr.test(target.val())) {   
            alert(msg);                 // 메시지 표시
            target.val("");             // 입력값을 강제로 지운다.
            target.focus();             // 포커스 강제 지정
            return false;               // 실패했음을 리턴
        }
        return true;                    // 성공했음을 리턴
    },

    /** 아래의 함수들은 정규표현식 검사 함수에게 검사대상과 검사할 표현식을 전달한다. */
    // 숫자로만 이루어 졌는지 검사
    num: function(selector, msg) {
        return this.field(selector, msg, /^[0-9]*$/);
    },

    // 영문으로만 이루어 졌는지 검사
    eng: function(selector, msg) {
        return this.field(selector, msg, /^[a-zA-Z]*$/);
    },

    // 한글로만 이루어 졌는지 검사
    kor: function(selector, msg) {
        return this.field(selector, msg, /^[ㄱ-ㅎ가-힣]*$/);
    },

    // 영문과 숫자로 이루어 졌는지 검사
    eng_num: function(selector, msg) {
        return this.field(selector, msg, /^[a-zA-Z0-9]*$/);
    },

    // 한글과 숫자로만 이루어 졌는지 검사
    kor_num: function(selector, msg) {
        return this.field(selector, msg, /^[ㄱ-ㅎ가-힣0-9]*$/);
    },

    // 이메일주소 형식인지 검사
    email: function(selector, msg) {
        return this.field(selector, msg,
            /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i);
    },

    // 핸드폰 번호 형식인지 검사
    cellphone: function(selector, msg) {
        return this.field(selector, msg, /^01(?:0|1|[6-9])(?:\d{3}|\d{4})\d{4}$/);
    },

    // 집전화 형식인지 검사
    telphone: function(selector, msg) {
        return this.field(selector, msg, /^\d{2,3}\d{3,4}\d{4}$/);
    },
    
    // 주민번호 형식인지 검사
    jumin: function(selector, msg) {
        return this.field(selector, msg, /^\d{6}[1-4]\d{6}/);
    },

    /**
     * 핸드폰번호 형식과 집전화 번호 형식 둘중 하나를 충족하는지 검사
     * @param  {string} selector 검사 대상의 selector
     * @param  {string} msg      조건을 충족하지 않을 경우 표시할 메시지
     * @return 조건에 충족할 경우 true / 그렇지 않을 경우 false
     */
    phone: function(selector, msg) {
        var check1 = /^01(?:0|1|[6-9])(?:\d{3}|\d{4})\d{4}$/;   // 핸드폰 형식
        var check2 = /^\d{2,3}\d{3,4}\d{4}$/;                   // 집전화 형식
        var target = $(selector);                               // 검사대상

        // 입력값이 없거나,   핸드폰 형식도 아니고          집전화 형식도 아니라면?
        if (!target.val() || (!check1.test(target.val()) && !check2.test(target.val()))) {
            alert(msg);         // 메시지 표시
            target.val("");     // 입력값 강제 지움
            target.focus();     // 포커스 지정
            return false;       // 실패했음을 리턴
        }
        return true;            // 성공했음을 리턴
    }
};```

최현석

유효성 검사(정규식 활용)

JS&JQuery

🧩html

🧩js

0개의 댓글