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 설정은 필수이다.
먼저 함수를 살펴본다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43 |
/**
* 바이트 문자 입력가능 문자수 체크
*
* @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;
} |
cs |
어렵지 않으니 중요한 부분만 설명한다.
9# : 바이트수를 체크하는 함수
12# : maxLength 파라미터를 입력받지 않았다면 태그의 속성에서 찾거나 기본값 1000을 입력함
15# : 바이트수를 계산하여 입력받은 maxLength보다 큰지 체크함
30# : 바이트수를 계산하여 반환하는 함수
33# : jquery charAt 함수를 이용하여 문자열을 한개씩 분리하고 escape를 이용하여 인코딩함
escape의 역할은 다음과 같다.
- 문자열의 각 문자들을 '%16진수코드값' 형태로 변환
- 영문 알파벳과, 숫자, 일부 특수문자(@, *, -, _, +, ., /)를 제외 문자만 인코딩
- 1바이트 문자는 '%XX' 형태로 표시
- 한글, 한자등(2바이트)은 '%u16진수4자리'로 표시
- 한글이 깨지는 것을 방지하기 위하여 사용
escape의 자세한 정보는 http://cofs.tistory.com/137 에서 참고
사용방법이다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17 |
<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();" > |
cs |
3# : maxLength 파라미터를 사용하는 방법
6# : maxLength 파라미터를 사용하지 않고 15# 에 보면 maxLength 속성을 추가한 방법