jquery javascript 문바열 바이트 체크 / 영문 한글 특수문자 등 / length / maxlength

 

jquery javascript 문바열 바이트 체크 / 영문 한글 특수문자 등 / length / maxlength

 

 

 

input text 태그의 경우에는 maxlength 속성을 이용하여 입력받을 최대 크기를 구할 수 있다.

 

하지만 maxlength 속성은 한글, 영문, 숫자, 특수문자 등이 고려되지 않았다.

 

단순하게 문자열의 length 만 가지고 입력을 제한한다.

 

문자열의 length만 가지고 입력을 제한을 하는 방법은 다음과 같은 문제가 있다.

 

 

데이터베이스의 인코딩에 따라 한글, 영문, 숫자, 특수문자 등의 byte 가 다르다.

 

보통 한글이 2byte 또는 3byte 를 사용한다.

 

데이터베이스의 컬럼 사이즈가 varchar2(10) 일 경우

 

영문, 숫자, 특수문자 일부는 10자, 한글은 2byte일 경우 5자, 3byte일 경우 3자만 입력가능하다.

 

textarea 태그의 경우에는 maxlength 조차 없다.

 

 

 

이럴 경우에 사용할 수 있는 함수를 하나 만들었다.

 

 

jquery 설정은 필수이다.

 

먼저 함수를 살펴본다.

 

/**
 * 바이트 문자 입력가능 문자수 체크
 * 
 * @param id : tag id 
 * @param title : tag title
 * @param maxLength : 최대 입력가능 수 (byte)
 * @returns {Boolean}
 */
function maxLengthCheck(id, title, maxLength){
     var obj = $("#"+id);
     if(maxLength == null) {
         maxLength = obj.attr("maxLength") != null ? obj.attr("maxLength") : 1000;
     }
     
     if(Number(byteCheck(obj)) > Number(maxLength)) {
         alert(title + "이(가) 입력가능문자수를 초과하였습니다.\n(영문, 숫자, 일반 특수문자 : " + maxLength + " / 한글, 한자, 기타 특수문자 : " + parseInt(maxLength/2, 10) + ").");
         obj.focus();
         return false;
     } else {
         return true;
    }
}
 
/**
 * 바이트수 반환  
 * 
 * @param el : tag jquery object
 * @returns {Number}
 */
function byteCheck(el){
    var codeByte = 0;
    for (var idx = 0; idx < el.val().length; idx++) {
        var oneChar = escape(el.val().charAt(idx));
        if ( oneChar.length == 1 ) {
            codeByte ++;
        } else if (oneChar.indexOf("%u") != -1) {
            codeByte += 2;
        } else if (oneChar.indexOf("%") != -1) {
            codeByte ++;
        }
    }
    return codeByte;
}

 

어렵지 않으니 중요한 부분만 설명한다.

9# : 바이트수를 체크하는 함수
12# : maxLength 파라미터를 입력받지 않았다면 태그의 속성에서 찾거나 기본값 1000을 입력함
15# : 바이트수를 계산하여 입력받은 maxLength보다 큰지 체크함
30# : 바이트수를 계산하여 반환하는 함수
33# : jquery charAt 함수를 이용하여 문자열을 한개씩 분리하고 escape를 이용하여 인코딩함

escape의 역할은 다음과 같다.
 - 문자열의 각 문자들을 '%16진수코드값' 형태로 변환
 - 영문 알파벳과, 숫자, 일부 특수문자(@, *, -, _, +, ., /)를 제외 문자만  인코딩
 - 1바이트 문자는 '%XX' 형태로 표시
 - 한글, 한자등(2바이트)은 '%u16진수4자리'로 표시
 - 한글이 깨지는 것을 방지하기 위하여 사용

escape의 자세한 정보는 http://cofs.tistory.com/137 에서 참고

 

 

사용방법이다.

    <script>
        function byteMaxLengthCheck(){
            if(!maxLengthCheck("textarea1", "textarea1 태그", "10")){
                return false;
            }
            if(!maxLengthCheck("textarea2", "textarea2 태그")){
                return false;
            }
            if(!maxLengthCheck("input1", "input1 태그", "10")){
                return false;
            }
        }
    </script>
    <textarea id="textarea1" rows="10" cols="10"></textarea>
    <textarea id="textarea2" rows="10" cols="10" maxLength="10"></textarea>
    <input type="text" id="input1">
    <input type="button" value="등록" onclick="byteMaxLengthCheck();" >

3# : maxLength 파라미터를 사용하는 방법

6# : maxLength 파라미터를 사용하지 않고 15# 에 보면 maxLength 속성을 추가한 방법