LiveValidation은 어찌보면 웹페이지를 만들때 꽤 짜증나는 작업중의 하나인 엘리먼트의 값을 체크하는 밸리데이션 작업을 자바스크립트 라이브러리로 만든 것이다.

요즘 자주 가는 파이어준님의 블로그에서 얼마전에 발견하고 실제로 써먹을만 한지를 벼르다가 지난주말에 테스트를 해보았다.(언어별로 파이어준님 같은 블로그 몇개만 있어두 진짜 대박일텐데....)

어쨌든 요즘의 추세로 보아 Submit버튼을 눌렀을 때 alert창을 통해서 밸리데이션과정을 거치는 것은 유저에게 꽤나 불편한 인터페이스였고 피드백도 불편했는데 라이브밸리데이션은 값을 입력할 때마다 바로바로 피드백을 주기때문에 꽤나 관심이 갔다.

과연 쓰기가 편할 것인가? 얼마나 기능을 지원할 것인가? 과연 한글은 될것인가 하는 고민을 가진채 테스트에 들어갔다.

처음 봤을때는 1.0버전이었는데 어느새 1.2버전이 되었다. 더군다나 prototype.js용 버전도 제공하는 것은 반가운 일이 아닐 수 없다. ㅎ

어쨌든 기대는 전혀 하지 마시고 테스트 페이지!!  클릭!!

뭐 대충 돌아가는게 저렇다... 기능을 볼라구 한거라서 딱히 디자인은 하지 않았다. 포스팅할라구 좀 이쁘게 해볼라다가 영 귀찮아서 그냥....

앞에 한글로 써놓지 않은 건 그냥 빈 input이다. 테스트로 넣다보니 그냥 넣어봤다. 에러메시지도 한글로 내맘대로 띄울수 있고 조건 다야하게 줄수 있고 입력하고 나서 바로바로 피드백해주고 submit버튼누르면 자동으로 밸리데이션 통과 안해준거를 표시해서 submit을 실행안시칸다.

자세한 내용은 라이브밸리데이션의 API 도큐먼트를 보면 된다. 영어라서 좀 압박이 있지만 약간만 만져보면 그닥 어렵지 않고 같은 패턴이 계속 반복되기 때문에 이해하기가 어렵지 않다. 사용법도 편하고. 예제소스랑 같이 비교해 보면서 해보면 금새 라이브밸리데이션의 동작을 이해할 수 있다.

머 상단에

<script src="livevalidation_standalone.js" type="text/javascript"></script>

라이브밸리데이션파일 인클루드 시키는 건 당연한 얘기고... 이렇게만 하면 일단 라이브밸리데이션을 사용하기 위한 준비는 끝이 났다. css가 있긴 하지만.. ㅎㅎ 이하소스는 모두 테스트파일에서 사용한 소스이다. 직접 소스보기를 하면 다 볼 수 있다.

// "헬로"라고만 입력받는 인풋
<script type="text/javascript">
    var validate = new LiveValidation('Text1', { validMessage: 'ㅇㅋ!', wait: 500});
    validate.add(Validate.Presence, {failureMessage: "필수 입력이야!"});
    validate.add(Validate.Format, {pattern: /^헬로$/i, failureMessage: "\"헬로\"라구 써줘" } );
</script>

원하는 위치에 위와같은 소스를 입력하면 된다. (유일하게 안좋은 점이라면 <input>태그 옆에 바로 자바스크립트가 들어가기 때문에 좀 지저분해 진다는 정도?) 저 소스는 에러메시지를 표시할 곳에 써주어야 한다.

대부분의 소스는 비슷한 형태를 띄우고 있다.

var validate = new LiveValidation('Text1', { validMessage: 'ㅇㅋ!', wait: 500});

위의 소스로 밸리데이션 객체를 만든다. validate의 이름은 뭐 개발자 맘대로이고 이걸 LIveValidation객체로 만들어 낸다. 그리고 첫번째 아규먼트로 체크할 인풋의 id를 준다. 두번째 아규먼트는 옵션인데 validMessage는 통과했을때 띄워줄 메시지이고 wait는 입력받고 500밀리세컨뒤에 표시해 준다. 두번째 아규먼트를 안주면 "Thanyou!"라는 메시지가 즉시 뜬다.

validate.add(Validate.Presence, {failureMessage: "필수 입력이야!"});

객체를 만든뒤 필요한 조건을 add로 추가하는 형태이다.(validate와 Validate는 물론 다르다.) Validate.Presence는 필수입력값이다. 이 조건을 넣으면 무조건 값을 입력받아야하고 아규먼트로(옵션) failureMessage를 주면 필수입력을 안받았을 경우에 띄워준다.

validate.add(Validate.Format, {pattern: /^헬로$/i, failureMessage: "\"헬로\"라구 써줘" } );

똑같은 형태로 조건을 추가한다. 이번엔 Format으로 정규식으로 패턴을 입력받았다. 포맷 패턴을 정규식으로 받기 때문에 활용도가 아주 막강하다. 여기선 간단히 했지만 정규식만 잘 사용하면 주민번호, 전화번호 등 다양한 값의 형식을 강제할 수 있다.

// 숫자만 입력받을 때
<script type="text/javascript">
    var validate = new LiveValidation('Text3', { validMessage: 'ㅇㅋ!', wait: 500});
    validate.add(Validate.Numericality, { minimum: 100, maximum: 2000, onlyInteger: true, tooLowMessage : "100보다 커!", tooHighMessage : "2000보다 작고", notAnIntegerMessage :"정수만"   } );
</script>

방식은 동일하다. 숫자일 경우에는 Validate.Numericality를 이요한다. minimum은 최소값이고 maximum은 최고값이다.(계속 봐서 알겠지만 보통 {}안에 들어간 값은 옵션값이라서 안주어두 상관없다.) onlyInteger를 true로 주면 정수값만 입력받고 tooLowMessage는 minimum보다 작을때 tooHighMessage는 maximum보다 클때의 에러메시지이고 notAnIntergerMessage는 정수가 아닐때의 에러메시지를 정해주는 것이다.

// 길이 제한 할 때
<script type="text/javascript">
    var validate = new LiveValidation('Text4', { validMessage: 'ㅇㅋ!', wait: 500});
    validate.add(Validate.Length, { maximum: 10, tooLongMessage : "최대 10" } );
</script>

계속해서 보듯이 같은 변수명으로 계속 객체를 만들어서 사용해도 아무런 문제가 생기지 않는다. 길이는 기본적으론 <input>에서 제한해 줄수 있기는 하지만 에러메시지를 띄워주는 것이 더 좋다구 생각한다. 길이는 Validate.Length를 이용한다. maximum은 최대 길이값이고 tooLongMessage는 최대값보다 많이 입력되었을 때의 에러메시지이다.

// 이메일 입력받을 때
<script type="text/javascript">
    var validate = new LiveValidation('Text5', { validMessage: 'ㅇㅋ!', wait: 500});
    validate.add(Validate.Email, { failureMessage : "이메일 양식 아님" } );
</script>

이메일을 위한 메서드도 제공하고 있다. Validate.Email을 이용하며 물론 실메일을 확인하는 건 아니고 양식만 확인해 준다. a@a.com나 메일@naver.com 등은 통과되고 메일@네이버.com은 통과되지 못한다. 복잡하고 귀찮은 메일체크를 아주 간단하게 해준다.

// 비밀번호 재입력 체크하기
<script type="text/javascript">
    var validate = new LiveValidation('pass2', { validMessage: 'ㅇㅋ!', wait: 500});
    validate.add(Validate.Presence);
    validate.add(Validate.Confirmation, { match: 'pass1', failureMessage : "패스워드 잘못 입력" } );
</script>

회원가입시에 항상 사용하는 비밀번호 재입력 확인하는 부분이다. 위에 했든이 Presence는 필수입력 여부이고 비밀번호를 재입력 받을때는 보통 <input>태그가 pass1, pass2처럼 2개가 있으므로 실시간으로 체크하는 라이브밸리데이션의 경우는 처음 객체생성할때 아래쪽에 있는 <input password>에 체크를 걸어주어야 한다.(아니면 첫 패스워드 입력할때 에러메시지가 계속 떠있으니까....)

비밀번호 체크는 Validate.Confirmation을 이용해서 match아규먼트로 첫 <input password>에 걸어주어서 두 값이 같은지를 비교한다.

// 약관동의 체크박스
<script type="text/javascript">
    var validate = new LiveValidation('Checkbox5', { validMessage: 'ㅇㅋ!', wait: 500});
    validate.add(Validate.Acceptance , { failureMessage : "약관에 동의하세요!!" } );
</script>

필수로 입력받는 약관 체크박스 사용이다. 필수체크이지만 Presence는 사용하지 않으며 대신에 Validate.Acceptance를 이용하면 자동으로 해당 체크박스가 반드시 체크되도록 확인한다.

테스트박스에는 만들어 놓기는 했지만 여러개의 체크박스와 라디오버튼에 대한 밸리데이션을 위한 메서드는 제공하지 않고 있다. 아마 다양한 환경이기 때문에 굳이 추가하지 않은듯 하다. 이부분만은 따로 스크립트를 작성해서 해결해야 할듯하다.


아직 자바스크립트도 다 모르는 와중에 대충 쓸만한지 어렵사리 확인해 봤는데 비교적 쓸만하다고 생각한다. 이정도면 실사이트에서도 바로 사용할 수 있을것 같다. 나같은 범인들에게는 이런 유용한 라이브러리는 참으로 행복한 일이다. 라이브러리를 쓴다고 자바스크립트를 고급까지 알지 않아도 된다는 것은 아니지만 좋은 기능을 쉽게 적용할 수 있다는 것은 행복한 일이다.

덧1) css를 적용하지 않으면 테스트페이지처럼 색이 적용되어서 나오지 않는다. 라이브밸리데이션 페이지에서 제공하는 css를 그대로 적용했는데 원한다면 css만 수정하면 원하는 색으로 출력해 줄수 있을 것이다.

덧2) 내 수준이 초급 수준이라 이런 소스의 설명을 한다는게 상당히 압박감이 있었다. 라이브러리소스를 설명한 건 아니지만..... 혹 잘못된 내용이 있으면 언제라도 덧글을 달아주시면 감사~