Tip&Tech/Web2007.07.21 01:29
이전 글에서 [팁] 플래시(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)로 넘어가구요...

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

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

이 글은 새로운 정보가 추가될 때마다 업데이트됩니다. 추천으로 아래 숫자에 1을 더해보세요. :)
RSS구독을 하시면 포스트를 배달해 드립니다. ▷ 한RSS 구독하기, 구글리더 구독하기

댓글을 달아 주세요

  1. 아, 어려운 정규식의 세계.. 참 익숙해지지 않는 것 같습니다. 저 과정을 넘어서면 고급으로 들어갈 수 있다던데.. ^^;;

    2007.07.21 01:48 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • ^^; 저야 이제 막 시작해서 그저 정신없을 따름입니다만... 주변을 보니 전문가 혹은 고수라고 하는 분들 중에서도 정규표현식을 어려워하시는 분들이 많더군요 ㅎㅎ;

      2007.07.21 12:29 신고 [ ADDR : EDIT/ DEL ]
  2. 아니 어떻게 자바를 그렇게 잘 아는지.. 전 하나도 모르겠다는...

    2007.07.23 19:45 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 여기저기서 주워담은 것들입니다. ^^;

      전 겨우 이해하는 수준인데요... ㅎㅎ;

      2007.07.24 14:27 신고 [ ADDR : EDIT/ DEL ]
  3. 동일한 기능을 input 태그의 스타일에서도 설정할 수 있습니다.

    style = "ime-mode:auto" (자동변경) (한/영 전환 가능)
    style = "ime-mode:active" (한글 모드) (한/영 전환 가능)
    style = "ime-mode:inactive" (영문 모드) (오직 영문)
    style = "ime-mode:disabled" (영문 모드) (한/영 전환 가능)
    style = "ime-mode:deactivated" (한글 모드) (한/영 전환 가능)

    2008.01.30 23:15 신고 [ ADDR : EDIT/ DEL : REPLY ]
  4. Favicon of http://www.toryburchoutletbb.com/ BlogIcon tory burch outlet

    관리자의 승인을 기다리고 있는 댓글입니다

    2013.01.05 03:36 [ ADDR : EDIT/ DEL : REPLY ]