[팁] 자바 스크립트를 이용한 Input Text 입력글자 제한하기!

이전 글에서 [팁] 플래시(Flash) 텍스트필드(TextField)에서 입력글자 제한하기! 에 대해 살펴봤습니다.

이번에는 자바 스크립트를 이용해 Input Text에서 동일한 기능을 하는 코드를 만들어 보겠습니다.

이전 글에서와 동일한 "제한조건"(영어, 숫자, -, _ 만 입력 가능)을 가정하기 때문에, 이전과 유사한 정규표현식을 활용할 것입니다.

(MissFlash) 정규표현식에 익숙하지 않은 분은 sungsoo, Yu님의 글( http://blog.naver.com/niceyss/130020022592 )을 읽어보시기 바랍니다.

그럼, 본격적으로 코드를 짜보겠습니다.
다음과 같이, form1이라는 이름의 폼과 my_id라는 이름의 Input Text, SAVE라는 이름의 Submit이 있습니다. Submit을 클릭하면 check()라는 함수를 실행하게 되고, 입력값이 정상이면 result.php파일을 실행하는군요...

<form method='post' name='form1' action='./result.php' onsubmit='return check()'>
* ID <input type='text' name='my_id' value='<? $my_id ?>' style='width:670px; height:22px; ime-mode:disabled;' />
<input type='submit' name='SAVE' style='width:100px; height:24px;' value='OK' />
</form>

그럼, 계속해서 check()라는 함수를 한 번 살펴볼까요?


check()의 목적은 my_id에 입력되는 글자를 검사하는 것입니다.

<script language="javascript">
<!--
function check(){
    var pattern = /(^[a-zA-Z0-9\-_]+$)/;
    if(!pattern.test(form1.my_id.value)){
        alert('영어, 숫자, -, _만 입력할 수 있습니다.');
        form1.my_id.focus();
        return false;
    }else{
        return;
    }
}
</script>

딱 보니 pattern이라는 변수의 정규표현식이 핵심인 것 같군요...

우리가 정의한 pattern은 test라는 정규표현식 비교함수를 통해 입력된 my_id라는 Input Text의 값과 비교하게 됩니다.

비교 결과, my_id에 "영어, 숫자, -, _"이외의 문자가 포함되었을 경우, 경고메세지가 나온 후, my_id로 포커스가 이동하게 되는군요...

물론, 입력 값에 문제가 없다면 정상적으로 다음 단계(result.php)로 넘어가구요...

비록 간단한 예이지만, 이것을 잘 활용한다면 아이디, 이메일, 고유번호 등을 자신의 구미에 맞게 제한할 수 있을 것입니다.

* 아이디와는 달리 이메일의 경우, 좀 더 복잡한 정규표현식이 필요할 겁니다. 저처럼 익숙하지 않은 사람들에게는 정말 눈돌아가는 식이지만...@_@; 이것도 자꾸 쓰다보면 익숙해 지겠죠? :)