Simple Javascript Form Validator

회사에서 사용중인 웹개발 프레임워크인 Lucy는 Webwork를 감싸서 사용하고 있는데, Validation Annotation 을 엉망으로 꼬아놓는 바람에 Webwork Client-Side Validation을 사용할 수 없고 촉박한 일정등의 상황때문에 간단한 Javascript form validator를 생각해보게 되었다.

Concept은 http://tetlaw.id.au/view/javascript/really-easy-field-validation 에서 따왔으나, alert 으로 알려주는 국내 방식(우리 회사 방식? 별로 맘에 들진 않는다.)에 맞지 않고, 검색 서비스 특성상 무거운 prototype.js 를 사용할 수도 없기 때문에 간단하게 만들어 보았다.

간단히 만들었으니 당연히 기능은 미약하기 짝이 없다.

다운로드

사용방법은
  • 아래처럼, 자바스크립트 라이브러리를 포함하고,

    <script src="validator.js" type="text/javascript"></script>
  • 다음과 같이 form 요소를 작성한다

    <input class="required validate-number" id="field1" name="field1"  title="필드 1" />
    validation type을 class 속성을 통해 전달 한다.
  • 그 다음, 아래와 같이 자바스크립트를 초기화 하면 된다.
     document.폼이름.onsubmit = function() {
      return Validator.validate(this);
     }
지원하는 validation type
  • required : 반드시 값을 입력해야 함
  • validate-number : 숫자만 입력가능 (., +, - 포함)
  • validate-digits : 자릿수만 입력가능 (숫자만)
  • validate-alpha : 알파뱃만 입력가능
  • validate-alphanum : 알파뱃과 숫자만 가능
  • validate-date : 날짜만 가능
  • validate-email : 이메일 주소
  • validate-url : URL

댓글

  1. 수많은 자바스크립트 폼체크 validator가 돌아 다니고 있다.

    구글링 한번이면 충분히 쓸만한 것들을 찾을 수 있다. 하지만 예전에 써본 그누보드의 그런 형태
    즉 엘레멘트의 어트리뷰트를 이용한 체크가 아무래도 사용자의 입장에서는 편리한거 같아 보였다.
    그래서 간단하게 만들어 본것인데...

    일단 페이지소스를 수정할 부분이 극히 적다는 점이 매우 매력이 있는거 같고...........뭐....그외는....
    일단 필요한 분들은 써보...

    답글삭제
  2. 감사합니다. 잘 사용하겠습니다.

    답글삭제

댓글 쓰기

이 블로그의 인기 게시물

단위테스트를 위한 주민등록번호 생성

낡은 방식으로 PHP를 사용하고 있는 조직의 개발환경 개선 방안 구상

LG 텔레콤 개인 정보 유출 건 반박