[JavaScript] 정규식 util 함수 만들어서 사용하기! (feat. JQuery)

2021. 11. 30. 13:58

회원가입이나 value 체크를 할 때 정규식을 많이 사용하게 된다.

자주 사용할만한 함수를 모아서 한곳에 모아두면 편리해진다!

value 체크를 위한 js코드 ( join-util.js )


var joins = {
    /**
     * 공백체크
     * @param str
     * @returns {boolean}
     */
    nullCheck : function (str){
        if((!str)){
            return true;
        }
        return false;
    },
    /**
     * 아이디체크
     * @param str
     * @return {boolean}
     */
    idCheck : function (str){
        var check = /^[A-Za-z0-9+].{3,25}$/;
        if((!str) || (!check.test(str))){
            return true;
        }
        return false;
    },
    /**
     * 길이체크 : 2글자 이상 ~ 10글자 이하
     * @param str
     * @returns {boolean}
     */
    lenCheck : function (str){
        var check = /^[가-힣]{2,10}$/;
        if((!str) || (!check.test(str))){
            return true;
        }
        return false;
    },
    lenCheck2 : function (str){
        if((!str) || (str.length < 2)){
            return true;
        }
        return false;
    },
    /**
     * 숫자 확인
     * @param num
     * @return {boolean}
     */
    numberCheck : function (str){
        console.log(str);
        var check = /[0-9]/g;
        if((!str) || (!check.test(str))){
            return true;
        }
        return false;
    },

    /**
     * 이메일 형식 확인
     * @param str
     * @return {boolean}
     */
    emailCheck : function (str){
        var check = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]+$/;;
        if((!str) || (!check.test(str))){
            return true;
        }
        return false;
    },

    /** 패스워드는 6 ~ 20자 이내 영문 대,소문자, 숫자, 특수문자 혼합 입력
     * 패스워드 형식 확인 : 영문/숫자/특수문자 조합 10자 이상
     * @param str
     * @return {boolean}
     */
    passwordCheck : function (str){
        var check = /^(?=.*[a-zA-Z])(?=.*[!@#$%^*+=-])(?=.*[!@#$%^*+=-])(?=.*[0-9]).{6,20}$/;
        if((!str) || (!check.test(str))){
            return true;
        }
        return false;
    },
    /**
     * 패스워드 재확인
     * @param str
     * @param str2
     * @return {boolean}
     */
    pwConfirmCheck : function (str, str2){
        if((!str2) || (str != str2)){
            return true;
        }
        return false;
    },
    /**
     * 전화번호 하이픈처리
     * @param obj
     */
    phoneKeyup : function (obj) {
        $(obj).val($(obj).val().replace(/[^0-9]/g, "").replace(/(^02|^0505|^1[0-9]{3}|^0[0-9]{2})([0-9]+)?([0-9]{4})$/, "$1-$2-$3").replace("--", "-"));
    },

    /**
     * 전화번호 확인 : hipen 포함
     * @param str
     * @returns {*}
     */
    phoneCheck : function (str){
        var check = /^01([0|1|6|7|8|9])-?([0-9]{3,4})-?([0-9]{4})$/;
        if((!str) || (!check.test(str))){
            return true;
        }
        return false;
    },

    /**
     * 전화번호 하이픈 제거 : DB 저장시
     * @param str
     * @return {*}
     */
    hyphenClear : function (str){
        return str.replaceAll("-", "");
    },


}

view에 가져와 사용을 해보자!

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <script src="/js/jquery-2.2.4.min.js"></script>
    <script src="/js/common/join-util.js"></script>
    <script src="/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
    <link href="/css/bootstrap.min.css" rel="stylesheet">


    <title>Title</title>
    <script type="text/javascript">
        function onChangeConfirm(obj, join, text) {
            if($(obj).val().trim().length > 0){
                if(join($(obj).val().trim())) {
                    $(obj).siblings().text(text);
                    confirmFail(obj);
                    return true;
                }else{
                    confirmSuccess(obj);
                    return false;
                }
            }else if($(obj).val().trim().length === 0){
                $(obj).removeClass('is-invalid');
                $(obj).removeClass('is-valid');
                $(obj).siblings().text("");
            }
        }

        function confirmFail(obj){
            $(obj).addClass('is-invalid');
            $(obj).siblings().addClass('invalid-feedback');
            $(obj).focus();
        }

        function confirmSuccess(obj){
            $(obj).removeClass('is-invalid');
            $(obj).addClass('is-valid');
        }
    </script>
</head>
<body>
<div class="form-group">
    <label for="userId" class="col-sm-2 control-label">아이디</label>
    <div class="col-sm-10">
        <input type="text" class="form-control" name="userId" id="userId" placeholder="아이디" data-minlength="4" required
               onchange="onChangeConfirm(this, joins.emailCheck, '이메일형식으로 입력해 주세요.')">
        <div class="float-right"></div>
    </div>
</div>
<div class="form-group">
    <label for="userName" class="col-sm-2 control-label">이름</label>
    <div class="col-sm-10">
        <input type="text" class="form-control" name="userName" id="userName" placeholder="이름" data-minlength="2" required
               onchange="onChangeConfirm(this, joins.lenCheck, '이름은 두글자 이상 입력해 주세요.' )">
        <div></div>
    </div>
</div>
</body>
</html>

코드를 분석해 보자면..

<script src="/js/jquery-2.2.4.min.js"></script>

extarnal 방식 으로 JS파일을 불러온다.

<input type="text" class="form-control" name="userId" id="userId" placeholder="아이디" data-minlength="4" required
       onchange="onChangeConfirm(this, joins.emailCheck, '이메일형식으로 입력해 주세요.')">
<div class="float-right"></div>

input 태그에서 onchage이벤트 발생시 onchageConfirm 함수가 실행되고, 함수의 파라미터로 this(태그 자체), util안의 함수, 문자열을 받게 된다.

function onChangeConfirm(obj, join, text) {
    if($(obj).val().trim().length > 0){
        if(join($(obj).val().trim())) {
            $(obj).siblings().text(text);
            confirmFail(obj);
            return true;
        }else{
            confirmSuccess(obj);
            return false;
        }
    }else if($(obj).val().trim().length === 0){
        $(obj).removeClass('is-invalid');
        $(obj).removeClass('is-valid');
        $(obj).siblings().text("");
    }
}

onchageConfirm()

- $(obj).val() : this의 value

- join : util안의 함수(emailCheck) == 파라미터로 받았기 때문에 콜백 함수가 된다.

/**
 * 이메일 형식 확인
 * @param str
 * @return {boolean}
 */
emailCheck : function (str){
    var check = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]+$/;;
    if((!str) || (!check.test(str))){
        return true;
    }
    return false;
}

if문 안에 함수의 파라미터로 $(obj).val()를 넣어주면 함수의 실행에 따라 boolean값을 반환 받게 된다.

true를 반환 받을 시

$(obj).siblings() : this의 형제요소 == <div class="float-right"></div> 의 text에 파라미터로 받은 문자열을 넣어주면, 조건 실행시 text가 보여지게 된다.

실행화면

'IT > JavaScript' 카테고리의 다른 글

[JavaScript] JSON 안에 배열 추가, 배열 안에 JSON 추가 (0)	2022.10.12
[JQuery] 이미지 미리보기 / FileReader (0)	2021.12.08
[JavaScript] window객체 정의 / 메서드 (0)	2021.10.13
[AJAX] Ajax에서 servlet 접근해서 데이터 가져오기 (0)	2021.06.16
[AJAX] Ajax에서 DB 취합 예시 (0)	2021.06.16

choice blog