Code Metaphor

회사에서 사용하기 위해 폼 유효성 검사(form validation) 라이브러리를 Prototype 기반으로 작성했었는데, 개인적으로 사용하기 위해 Mootools 기반으로 재작성해 보았다. 사용법은 쉽고 간단하다.

아래와 같이 직접 Validator 인스턴스를 생성하거나,

var signupValidator = new Validator([
    new Field('이름', 'name', [minlength(4), alnum]),
    new Field('비밀번호', 'password', [required])
]);

Field.scanForm() 메서드를 사용할 수도 있다. 이 메서드는 Field 인스턴스들의 배열을 반환하는 팩토리 메서드로, 폼의 내의 <input>, <label> 등의 엘리먼트들을 읽고 상관 관계를 해석해서 자동으로 Field 인스턴스를 만들어준다. 규칙을 담당하는 Rule 인스턴스들의 경우 필드 엘리먼트에서 class="rule:minlength(4) rule:required" 등으로 명시할 수 있다.

var signupValidator = new Validator(Field.scanForm('form-id'));

유효성 검사는 만들어진 Validator 인스턴스의 validate() 메서드를 호출하면 간단하게 처리되며, 유효성이 깨졌을 때는 false를 반환한다. validate() 메서드는 하나의 가변인자를 받는데, 깨진 유효성 규칙과 필드에 대한 표시를 해주는 함수 객체이다(Flash).

<form action="example.html"
      onsubmit="return (new Validator(Field.scanForm(this))).validate(Validator.flashes.inlineAlert);">
    <div>
        <label for="name">이름</label>
        <input id="name" type="text" class="rule:minlength(4)" />
    </div>
    <div>
        <label for="password">비밀번호</label>
        <input id="password" type="password" class="rule:required" />
    </div>
    <input type="submit" />
</form>

• 튜토리얼
• 예제 페이지
• Validator.js