[JS, J-QUERY] Parsley validator(폼유효성 검증) 사용법 #2

이전 장에 이어 파슬리 유효성 검증의 사용법에 대하여 알아봅니다. 실질적으로 폼에 유효성 검증을 구현하는 부분입니다.

첨부 이미지가 잘안보이면 클릭하면 확대됩니다.

Parsley 기본 API

파슬리는 무거운 작업을 수행할 수 있게 다른 클래스를 사용하는 분리된 라이브러리이다. 어떻게 원하는 검증에 맞게 구성할 수 있는지 살펴보자.

Parsley 설정
물론, 이 문서는 가능한 가장 철저하고 비교적 이해하기 쉽게 작성되었다. 이 문서는 또한 완벽한 주석 소스를 제공한다. 잠시의 시간을 들여 문서를 살펴보고 구조를 이해하는 것이 아래의 강의들을 이해하는데 도움이 될것이다.

Data 속성과 자바스크립트

여러개의 옵션을 지정하는 것은 데이터 속성과 자바스크립트를 사용하여 지정할 수 있다:

폼 전체를 검증할때는 data-parsley-validate로 초기화하지만 필드별로 하나하나 따로 지정할 수도 있습니다. 위의 예제는 필드별로 속성과 값을 data를 이용해 지정하는 방법과 자바스크립트를 이용하여 추가하는 방법에 대하여 설명하고 있습니다. isValid()는 필드가 유효한지 아닌지를 반환합니다.

옵션 상속

필드 인스턴스는 폼 인스턴스로부터 자신의 옵션을 상속받으며, 둘다 전역 옵션으로부터 상속받는다. 이것은 모든 폼의 input을 폼을 통해 설정된 값을 연속으로 전달하는 편리한 방법이다.

위의 예는 옵션의 상속이 자동적으로 이루어지는 것을 보여줍니다. 전역에서 설정한 옵션이 필드에게 까지 상속된 것을 알 수 있습니다. 이것은 prototype을 통해 연결되어 있습니다.

네이밍(Naming)

namespace 옵션을 사용하여 직접적으로 DOM API 네임스페이스를 변경할 수 있다. Data 속성은 자바스크립트 카멜케이스된 이름의 혼합으로 표기되며, 그들의 값들은 적절한 형식으로 자동적으로 변환된다(boolean, integer, etc). 예를 들면:

Parsley 폼 사용법

<form id="target"> 요소에 $('#target').parsley() 혹은 new Parsley('#target'); 로 적용할때, 그것은 전체 폼에 결합하고 다양한 inputs과 ParsleyForm 인스턴스를 반환한다.

옵션들

위의 속성들이 폼 요소에 설정할 수 있는 것들입니다.

메소드

Parsley 필드 사용법

<input id="target"> 요소에 $('#target').parsley() 혹은 new Parsley('#target'); 로 적용할때(혹은 <textarea>, <select>), 그것은 필드에 결합하고 ParsleyField 인스턴스를 반환한다. name 속성과 data-parsley-multiple 속성이 없는 라디오와 체크박스 유형을 제외한 나머지는 결합되지 못하고(무시) 결국 콘솔에 경고를 올릴 것이다.

옵션들

체크박스와 라디오 그리고 셀렉트요소의 multiple 속성

 

이 필드들은 전형적인 input, textarea, 간단한 select 보다 약간 다른점이 있다. 파슬리에의해 결합되고 검증되려면 name 혹은 id 속성을 필요로한다. 그렇지않으면 무시되고 콘솔에 경고가 나타난다.

 

위의 것들은 필드에 직접 추가할 수 있는 속성들입니다.

메소드

다음 장에서 내장된 유효성 검사기들에 대하여 알아봅니다.

 

출처: https://webdir.tistory.com/424?category=612481 [WEBDIR]