Parsley validator(폼유효성 검증) remote와 extra #5

파슬리가 추가로 제공하는 ajax를 이용한 원격 유효성 검증과 기타 검증기들을 소개합니다.

Parsley Remote

Parsley remote는 고유한 ajax 비동기 검증을 추가하는 편리한 플러그인이다. 이 플러그인의 사용은 parsley.js가 로딩되기 전에 parsley.remote.js를 로드하거나 직접적으로 parsley.remote.js를 로드한다.

옵션들

Name	API	Description
Remote validator	data-parsley-remote #2.0	입력된 내용을 검증하기 위해 호출되는 URL을 정의한다. 예: data-parsley-remote="http://url.ext"
Reverse	data-parsley-remote-reverse #2.0	기본적으로 모든 2xx ajax 반환은 유효한 것으로 간주되고 다른 모든 것은 실패로 간주한다. 때때로(when a call is needed to see if an email, a pseudo is available for example) 404 API 응답이 올바른 응답이 될수도 있다. data-parsley-remote-reverse="true" 를 사용하면 200 응답은 에러로, 404가 올바른 응답으로 구성된다.
Options	data-parsley-remote-options #2.0	원격 검증에 사용되는 $.ajax() 메소드에 json 객체를 전달할 수 있다. 예: data-parsley-remote-options='{ "type": "POST", "dataType": "jsonp", "data": { "token": "value" } }' 경고! JSON 문자열은 모두 " 로 감싸는 키/값으로 구성해야 한다. 그렇지않으면 제대로 원격 검증기에 의해 내부적으로 사용되는 $.parseJSON()에 의해 구문분석할 수 없다. jQuery doc을 보라.
Validator	data-parsley-remote-validator #2.0	특정 원격 검증기를 사용한다. 기본적으로 2개의 내장된 원격 검증기가 있다: default와 reverse. default가 기본적으로 사용되고 reverse는 data-parsley-remote-validator="reverse"를 true로 설정했을때 사용한다. 함수 내부에서, this 키워드는 폼 요소에 부착된 ParsleyField 인스턴스를 의미한다. 검증 결과를 반환하기전에 다른 작업을 수행해야하는 경우 플러그인은 요소에 접근할수 있다.

메소드

Method	Description
asyncIsValid() #2.0	필드나 폼이 유효한지 아닌지를 비동기식으로 얻을수 있다. jQuery promise를 반환한다.
asyncValidate() #2.0	비동기식으로 필드나 폼의 유효성을 확인하고 UI 오류를 표시한다. Query promise를 반환한다.
addAsyncValidator(name, fn) #2.0	새로운 맞춤화 원격 검증기를 추가한다.

맞춤형 원격 검증기

맞춤형 원격 검증기 구성은 두가지 방법이 있다:

parsley.remote.js를 호출하기 전에 몇가지 전역적으로 등록한다.

<input name="q" type="text" data-parsley-remote data-parsley-remote-validator='mycustom' value="foo" />

<script type="text/javascript">
window.ParsleyExtend = {
  asyncValidators: {
    mycustom: {
      fn: function (xhr) {
        console.log(this.$element); // jQuery Object[ input[name="q"] ]

        return 404 === xhr.status;
      },
      url: 'http://mycustomapiurl.ext'
    }
  }
};
</script>
<script href="parsley.remote.js"></script>
<script href="parsley.js"></script>

혹은 parsley.remote.js가 로드된 후에 등록한다.

<input name="q" type="text" data-parsley-remote data-parsley-remote-validator='mycustom' value="foo" />

<script href="parsley.remote.js"></script>
<script href="parsley.js"></script>
<script type="text/javascript">
$('[name="q"]').parsley()
  .addAsyncValidator('mycustom', function (xhr) {
    console.log(this.$element); // jQuery Object[ input[name="q"] ]

    return 404 === xhr.status;
  }, 'http://mycustomapiurl.ext');
</script>

Parsley Extras

Parsley.zip 혹은 Github 프로젝트에서 src/extra/ 디렉토리를 보면 유용한 검증기 조작을 찾을수 있다.

검증기 목록

Name	API	Description
Greater than #2.0	data-parsley-gt="#anotherfield" data-parsley-gt="6"	값이 다른 필드의 값 또는 어떤 엄격한 최소 수 보다 큰지를 검증
Greater than or equal to #2.0	data-parsley-gte="#anotherfield" data-parsley-gte="6"	값이 다른 필드의 값 또는 어떤 최소 수와 같거나 큰지를 검증
Less than #2.0	data-parsley-lt="#anotherfield" data-parsley-lt="6"	값이 다른 필드의 값 또는 어떤 엄격한 최대 수보다 작은 지를 검증
Less than or equal to #2.0	data-parsley-lte="#anotherfield" data-parsley-lte="6"	값이 다른 필드의 값 또는 어떤 최소 수 이하인지를 검증
Minwords #2.0	data-parsley-minwords="200"	값이 단어들 중 적어도 일정량을 검증한다.
Maxwords #2.0	data-parsley-maxwords="200"	값이 단어들의 특정량의 최대만큼 갖고있는지를 검증
Words #2.0	data-parsley-words="[200, 600]"	값이 워드들의 어떤 범위 내에 있다는 것을 검증