새로운 접근법에 의한 자바스크립트 소스입니다.
사용해보시면 전혀 다른 느낌을 받으시리라 생각합니다.
혹 프로젝트에 적용하시면 연락주시기 바랍니다.
     

              김성조(LG-EDS) 
              javalife@korea.com

-----------------------------------------------------------------------
 목  적 : 화면단 Validation/Filter/Format(money, dollar, date, mask)기능을  
          처리한다. 
 작성자 : 김성조(원본제작) 
 수  정 : 박수현(2000-09-15)  
          김성조(2001-02-??)

 사용설명 : 
          1. html문서 하단에 아래처럼 스크립트화일을 지정한다. 
             예: <SCRIPT src="jsx.js" language="JScript"></SCRIPT> 
          2. <input> 태그내 사용하고자 하는 기능을 삽입한다. 
             예: <INPUT type="text" name="kkkk" size="20"  
                  maxlength="10" money required> 
          3. 기능 
             - readOnly 
               필드를 읽기전용으로 만든다. 

             - required 
               필드를 필수입력으로 만든다. 
               입력이 되지않았을 시 메세지와 함께 노란바탕으로 변한다. 

             - right 
               필드내 text-alignment를 오른쪽으로 정리한다. 
               물론 디폴트는 왼쪽정렬이다. 

             - filter="[abcde-y]" 
               나열된 내용만 입력가능하도록 filtering을 한다. 
               예: "[abc]" -> a, b, c만 입력가능하다. 
               예: "[acf]" -> a, c, f만 입력가능하다. 
               예: "[a-z123]" -> a에서 z까지와 1, 2, 3 이 입력가능하다. 
               예: "[a4*#$%]" -> a, 4, *, #, $, % 가 입력가능하다. 

             - mask="999-999" 
               우편번호를 입력하고자 할때 위와같이 세팅하고 
                maxlength="6"으로 지정한다. 즉 숫자갯수만큼만 지정한다. 
               "600112" 입력시 "600-112"으로 리포맷된다. 
             - money 
               금액 입력후 필드를 벗어나게 되면 세자리마다 콤마(,)가 생성된다. 
               "1234567890" 입력시 "1,234,567,890"으로 리포맷된다. 

             - date 
               날자를 입력하는 필드의 경우 사용한다. 
               date와 mask를 함께 사용한다. 
               예: <INPUT type="text" name="8" size="20" maxlength="8" 
                   date mask="9999-99-99" required> 
               여기서도 maxlength는 숫자갯수인 8이다. 
               "20000914" 입력시 "2000-09-14"으로 리포맷된다. 

             - dollar 
               "123456" 입력시 "1234.56"으로 리포맷된다. 

             - do_disable="aa,bb,cc" 
                해당필드에 값이 들어 오면 등록된 aa bb그리고 cc라는 이름을 가진 필드를  
                 disable시킨다. 

             - do_value  
                do_disable이 동작하는데 특정 값을 지정하고자 할 때 사용한다. 

jsx1.5.zip (6309 Bytes)

신기하게 잘 작동하는것 같습니다.

그러나 바로 업무에 적용하기에는 몇가지 부분의 보완이 필요할것 같습니다.
(제가 고치기에는 능력부족)

[date mask="9999-99-99"]:
입력을 '12345678' 이렇게 하면 '1234-56-78' 요렇게 나오는 군요
56월 78일은 없는데요

[dollar]:
보통 입력을 123456.78 이렇게 입력을 하거든요
그런데 소숫점이 입력안되요
물론 12345678 이렇게 입력하면 123,456.78 이라고 표시되지만 
통상 소숫점을 사용자가 직접입력을 하거든요(우리만 이렇나...)

아무튼 요 부분만 보완이 되면 바로 업무에 적용할 수 있을것 같습니다.

부탁드려도 될까요.

당장 수정을 하기는 저도 시간이 필요할 것 같구요..
먼저 date에는 마스크를 사용하지 않습니다. 단지 date라고만 쓰시면
동작하구요.. 중요한 것은 editing은 포커스가 떠날때이루어지고
validation은 submit이 눌러졌을때 이루어집니다. 따라서 잘못된 날짜에 대해서는
submit에서 에러가 메세지가 발생할 것입니다. 
그리고 dollar는 사실 그냥 넣은것인데.. 조금 시간을 가지고 
연구해보아야 할 것 같습니다. 수정되면 다시 이곳에 올리겠습니다.

허락도없이 JSX를 수정을 해서 죄송합니다.

수정내용은..

- Enter시 Onsubmit이 아닌 다음입력항목으로 포커스 이동(지정되지 않았으면 onsubmit 이벤트실행)
- Formatting이 Onblur이벤가 아닌 실시간으로 처리
- Mask Type시 Format(포맷문자의 다양화)의 다양화.
    '-'이외에 '(', ')'등 '-'이외의 문자를 사용할 수 있도록.
       (숫자이외의 문자는 포맷으로 제공될 수 있도록 하는것임.)
- 1개의 <FORM>태그에서만 이용 가능한 것을 여러개의 <FORM>태그에서 이용이 가능하도록 수정.
- Date Type시 날자를 확인하는 부분의 코드변경(JavaServiceNet에 게시된 자바스크립트를 이용)

위에 것들을 가능케하기 위해서 코드가 크게 변경된것들도 있습니다.
참고하시고, 수고하세요. ^^

jsx.js (18981 Bytes)

위의 모듈을 가지고 제가 테스트 해본바로는 html에서는 제대로 적용되는데 ...
jsp쪽에서는 적용이 되지않는군요...
무슨 이유인지 모르겠군요.(자바스크립트에는 아직약해서 ....)
혹시 무슨이유인지 아시면 답변부탁드립니다.
제대로 적용만 할수 있으면 실제 프로젝트에서도 요긴하게 사용될수 있을것 같군요.

한 페이지에 form이 여러개 있을 경우는 고려가 되어 있지 않은 것 같네요.
저도 위와 같은 상황이 있을까 했는데, 얼마전 실제 그렇게 돼어 있는 코드들을
만났네요.

해서..

jsx.js의 맨 아래(490라인대) 각 폼 오브젝트들에 특성을 매핑시키는 부분이
수정되어야 할 것 같습니다.

현재는 var mForm =  document.forms[0]; 같이 폼이 하나일 경우만 가정이 되어
있는데.. 아래와 같은 식으로 수정되어야 하겠지요.

for (var ii = 0; ii < document.forms.length; ii++) {
    var mForm =  document.forms[ii];
    ... [중략] ...
}