본문으로 바로가기

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

Parsley 기본 API

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

$ API Retrun
$('#existingForm').parsley(options) #2.0 parsleyFormInstance
$('#existingInput').parsley(options) #2.0 parsleyFieldInstance
$('#notExistingDOMElement').parsley(options) #2.0 undefined
$('.multipleElements').parsley(options) #2.0 Array[Instances]
물론, 이 문서는 가능한 가장 철저하고 비교적 이해하기 쉽게 작성되었다. 이 문서는 또한 완벽한 주석 소스를 제공한다. 잠시의 시간을 들여 문서를 살펴보고 구조를 이해하는 것이 아래의 강의들을 이해하는데 도움이 될것이다.

Parsley 설정

Data 속성과 자바스크립트

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

<input id="first" data-parsley-maxlength="42" value="hello"/>
<input id="second" value="world"/>

<script>
var instance = $('#first').parsley();
console.log(instance.isValid()); // maxlength is 42, so field is valid

$('#first').attr('data-parsley-maxlength', 4);
console.log(instance.isValid()); // No longer valid, as maxlength is 4

// You can access and override options in javascript too:
instance.options.maxlength++;
console.log(instance.isValid()); // Back to being valid, as maxlength is 5

// Alternatively, the options can be specified the first time a form/field is bound:
var otherInstance = $('#second').parsley({
  maxlength: 10
});
console.log(otherInstance.options); // Shows that maxlength will be 10 for this field
</script>
폼 전체를 검증할때는 data-parsley-validate로 초기화하지만 필드별로 하나하나 따로 지정할 수도 있습니다. 위의 예제는 필드별로 속성과 값을 data를 이용해 지정하는 방법과 자바스크립트를 이용하여 추가하는 방법에 대하여 설명하고 있습니다. isValid()는 필드가 유효한지 아닌지를 반환합니다.

옵션 상속

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

<form>
  <input/>
</form>

<script>
Parsley.options.maxlength = 42;
var formInstance = $('form').parsley();
var field = $('input').parsley();
console.log(field.options.maxlength); // Shows that maxlength is 42

Parsley.options.maxlength = 30;
console.log(field.options.maxlength); // Shows that maxlength is automagically 30

formInstance.options.maxlength++;
console.log(field.options.maxlength); // Shows that maxlength is automagically 31
</script>
위의 예는 옵션의 상속이 자동적으로 이루어지는 것을 보여줍니다. 전역에서 설정한 옵션이 필드에게 까지 상속된 것을 알 수 있습니다. 이것은 prototype을 통해 연결되어 있습니다.

네이밍(Naming)

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

<input data-my-namespace-priority-enabled="false">
...

<script>
var instance = $('input').parsley({namespace: 'my-namespace-'});
if (false === instance.options.priorityEnabled)
  console.log("priorityEnabled was set to false");
</script>

Parsley 폼 사용법

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

옵션들

Property Default Description
data-parsley-namespace #2.0 data-parsley- 파슬리 DOM API에 의해 사용되는 네임스페이스는 DOM에서 옵션을 결합한다.
data-parsley-validate #2.0 문서가 로드되면 파슬리 검증은 자동적으로 폼에 결합된다.
data-parsley-priority-enabled #2.0 true 어느쪽이 높은 우선순위인지 제약조건을 판별해 첫번째 실패시 중지(true 일경우) 혹은 동시에 제약 조건을 확인하고 한가지라도 실패시 모두 보여준다(false 일 경우).
data-parsley-excluded #2.0 input[type=button], input[type=submit], input[type=reset], input[type=hidden] 파슬리에 의해 검증받지 않는 폼 필드이다. 예를들면, 기존목록에 disabled 와 hidden 필드를 추가할 경우: data-parsley-excluded="input[type=button], input[type=submit], input[type=reset], input[type=hidden], [disabled], :hidden"
위의 속성들이 폼 요소에 설정할 수 있는 것들입니다.

메소드

Method Returns Description
isValid(group, force) #2.0 boolean 폼이 유효한지 아닌지를 반환한다. 이벤트도 발생시키지 않고 UI에 영향을 미치지도 않는다. group 이 주어지면, 그 그룹에 속한 필드의 유효성만을 검증한다. force 가 주어지면, required 필드가 아닌 필드까지 강제로 검증한다. 예제
validate(group, force) #2.0 boolean 폼을 검증한다. 유효하지 않은 경우 제출을 방지한다. 이벤트가 발생하고 UI에 영향을 준다. 선택적인(optional) group 문자열 매개변수를 지정하여 필드의 특정 그룹만을 검증할 수 있다. group 이 주어진다면, 그룹에 속하는 필드만을 검증한다. force 가 주어진다면, required 필드가 아닌 것도 강제로 검증한다. 예제
reset() #2.0 해당 폼과 필드에 대한 UI를 재설정한다.
destory() #2.0 해당 폼과 필드를 비활성화하고 파슬리를 파괴한다.

Parsley 필드 사용법

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

옵션들

Property Description
data-parsley-value #2.0 실제 하나를 분리해서 파슬리 검증에 특정 필드값을 설정하는 예:
data-parsley-value="foo"
자바스크립트 API는 호출될 함수 하나에 전달할 수 있다. 예를 들면:
$('<input type="text">').appendTo($('form')).parsley({value: function(parsley) { return 'foo'; }});
data-parsley-group #2.0 특정 그룹 검증을 위한 필드에 그룹을 지정한다. 예:
data-parsley-group="signup"
이렇게하면 모든 필드가 아닌 폼의 일부분만을 검증할 수 있다. 다수의 설정 예:
data-parsley-group='["foo", "bar"]
data-parsley-multiple #2.0 라디오와 체크박스 요소에 이 속성을 추가할 수 있다. 아래처럼 :
data-parsley-multiple="mymultiplelink" 같은 name을 공유하지 않는 라디오와 체크박스에도 함께 연결할 수 있다.
data-parsley-validate-if-empty #2.0 필드는 기본적으로 필수(requierd)가 아닌 비어있는 필드에는 검증을 실행하지 않는다. data-parsley-validate-if-empty를 추가함으로써, 필드가 비어있을때에도 검증을 실행할 수 있다. 필드가 비어있을때 무엇인가 확인해야 하는 경우 유용하다.
data-parsley-trim-value #2.0 파슬리 검증을 위해 필드값의 공백을 제거(입력값 자체에 대한 것이 아닌지라 서버로 전송되는 데이터에 영향을 주진 않음). 백엔드에 이미 불필요한 공백을 제거하는 유효성검사가 있을 경우 혼란을 줄이기 위해 이를 사용하는 것이 유용할수 있다. data-parsley-trim-value="true"를 사용하라.
data-parsley-ui-enabled #2.0 만일 false로 설정하면 파슬리는 이 필드에 대한 검증 결과를 출력한는 UI를 비활성화한다.
data-parsley-errors-messages-disabled #2.0 해당 필드에 parsley-successparsley-error 클래스를 추가하지만 에러 메세지는 추가하지 않는다.
data-parsley-excluded #2.0 만일 true로 설정하면, 파슬리는 폼에 바인될때 이 필드를 무시한다.
체크박스와 라디오 그리고 셀렉트요소의 multiple 속성
이 필드들은 전형적인 input, textarea, 간단한 select 보다 약간 다른점이 있다. 파슬리에의해 결합되고 검증되려면 name 혹은 id 속성을 필요로한다. 그렇지않으면 무시되고 콘솔에 경고가 나타난다.

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

메소드

Method Returns Description
isValid(force) #2.0 true 모두 정상인 경우
[] 비어있는 선택적(optional) 필드의 경우
[Violation [, Violation..]] 실패할 경우
필드가 유효한지 아닌지를 반환한다. 이벤트를 발생시키지 않으며 UI에 영향을 주지 않는다. force가 주어지면, 필수가 아닌 필드도 강제로 검증한다.
validate(force) #2.0 true 모두 정상인 경우
[] 비어있는 선택적 필드인 경우
[Violation [, Violation..]] 실패할 경우
필드를 검증한다. 이벤트가 발생되고 UI에 영향을 미친다. force가 주어지면, 필수가 아닌 필드도 강제로 검증한다.
reset() #2.0 해당 필드의 UI를 초기화한다.
destory() #2.0 해당 필드를 비활성화하고 파괴한다.

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



댓글을 달아 주세요

티스토리 툴바