손쉬운 유효성 검사를 위한 Parsley.js
이번에 소개할 jQuery 플러그인은 유효성 검사를 손쉽게 할 수 있도록 해 주는 플러그인인 Parsley.js입니다.
Parsley.js에 대한 간략한 정보는 아래와 같습니다.
- 제작자 / 제작사 : Guillaume Potier
- 홈페이지 : http://parsleyjs.org/
- Repository : https://github.com/guillaumepotier/Parsley.js/
- 요구하는 jQuery 버전 : 1.7 이상
- 브라우저 호환성 : IE 7/8 이상 (jQuery 1.x 사용 시), IE 9 이상 (jQuery 2.x 사용 시) / Firefox 14 이상 / Chrome / Safari
- 한글화 여부 : 2.0.0 : X / 1.2.3 : O (참고 : 구 버전의 언어 파일은 2.0.0과 호환되지 않으므로 언어 파일 변환 작업 필요.)
- 타 플러그인 의존성 : 없음
- 가격 : 무료
- 라이센스 : MIT 라이센스 (개인 및 상업적 용도 모두 해당)
웹 페이지의 회원 가입 페이지 등을 만들 때 유효성 검사를 위해서는 JS 및 서버측 유효성 검사(Server-side Validation)를 통해 두 번에 걸쳐 유효성을 확인해 주도록 짜야 합니다. 문제는 이게 항목이 적은 경우에는 괜찮은데, 항목이 많아지고, 유효성 검사를 위한 정규식이 복잡해질수록 굉장히 귀찮은 작업이 된다는 점입니다.
물론 JS만 쓰거나 서버측 유효성 검사만을 사용하는 방법으로 이중 작업을 하지 않을 수 있겠지만, 전자는 JS를 꺼버리거나 변조 (JS는 클라이언트에서 스크립트가 실행되므로 로컬에서 변조하는 게 어렵지 않습니다.)해서 유효성 검사를 피하는 기법이 사용될 경우 보안이 취약해지고, 후자는 서버의 스크립트 페이지를 거쳤다가 다시 나와야 하므로 사용자는 귀찮아지고, 서버는 서버대로 검사를 계속 해야 하므로 서버에 약간의 부담을 주는 측면이 있기 때문에 어쩔 수 없이 이중 작업을 하게 될 수밖에 없습니다.
예전에는 저도 JS를 일일이 짰었는데, 아무래도 제 JS 실력이 바닥을 기다 보니 효율적인 유효성 검사 JS를 짜는 것이 어렵더군요. 그래서 뭔가 쓸만한 것이 있나 찾아보다가 찾아낸 것이 바로 오늘 소개드릴 플러그인인 파슬리 (Parsley.js 입니다.)
Parsley.js는 브라우저의 DOM 기반으로 작동하기 때문에 굉장히 사용하기가 쉽습니다. 또한 기본적인 검증 요소들 (숫자, 전화번호, 입력 값 일치 여부 등)을 제공하며, 고급 사용자를 위한 기능들 (DOM 기반이 아닌 검사용 스크립트 직접 작성, 정규식 표현을 통한 검사, 오류 메시지 CSS 커스터마이징)도 빠지지 않고 들어 있습니다. 일단은 간단한 DOM 기반의 예제 페이지를 통해 어떻게 사용되는 지 보여드리도록 하겠습니다.
위의 예제를 가지고 간단히 설명을 드리도록 하겠습니다. 일단은 간단하게 텍스트 상자 3개로 구성되어 있으며 각각 숫자, 메일 주소, 숫자 범위에 대한 유효성을 검사하도록 작성되어 있습니다.
일단은 form 태그에 data-parsley-validate를 넣어 주셔야 parsley.js가 어떤 폼을 검사해야 할 지 정상적으로 인식하게 됩니다.
그리고 각각의 input 태그에 조건을 걸어 주었습니다. 공통적으로 적용되어 있는 것은 data-parsley-required와 data-parsley-trigger인데, data-parsley-required를 true로 설정하면 반드시 입력해야 할 필수 항목으로 인식하게 됩니다 (또는 HTML5 표준에 맞춰 태그의 맨 끝에 required를 추가해도 됩니다.). 그리고 data-parsley-trigger은 유효성 검사 이벤트가 어떤 동작일 때 발생할 지를 설정하는 속성입니다. 여기서는 change로 되어 있는데 focusin, focusout, blur 등의 이벤트를 적용할 수도 있으며, 2개 이상의 이벤트를 지정하는 것도 가능합니다. (공백으로 구분해서 입력)
역시 가장 중요한 것은 유효성 검사 형식을 알려주는 것입니다. 첫번째 숫자 입력 텍스트 상자같은 경우에는 data-parsley-type="digits"가 설정되어 있는데, 숫자 이외의 알파벳이나 기호가 입력되면 텍스트 상자 아래에 오류 메시지를 출력하게 됩니다.
두번째는 메일 주소 입력 텍스트 상자인데, data-parsley-type="email"이 지정되어 있습니다. 올바른 메일 주소 형식이 아닌 경우에는 오류 메시지를 출력하며, 올바른 메일 주소일 경우에는 아무 메시지도 뜨지 않습니다.
세번째는 범위 입력 텍스트 상자이며, data-parsley-range="[100, 500]"이 지정되어 있습니다. 이 텍스트 상자에는 100에서 500 사이의 값이 들어가야 하며, 그 이외의 값이 들어가는 경우에는 오류 메시지를 출력하게 되어 있습니다.
오류 메시지는 자동으로 해당 input 태그의 아래쪽에 출력됩니다. 출력에는 ul>li 태그가 사용되며, 사용자가 별도의 CSS 스타일을 지정하여 간편하게 커스터마이징할 수 있습니다.
이렇게 해서 항상 그런 것 같지만 대충 Parsley.js에 대해서 살펴보았습니다. 자세한 세부 옵션이나 API는 아래 링크를 참고하시기 바랍니다.
* 업데이트 : Parsley.js의 최신 버전 (2.0.0) 변경 사항 반영 (2014/03/28)