Parsley validator(폼유효성 검증) 내장된 유효성 검증기 #3

파슬리에는 미리 제작되어 포함하고 있는 유효성 검증기들이 마련되어 있습니다. 간단한 검증은 이것들을 이용해서 검증을 하게 되니 이 내장된 검증기들에 대하여 알아봅니다.

Parsley 내장된 검사기

파슬리 2.x는 일반적으로 사용되는 유효성검증기이고 그룹과 우선순위 검증을 단순화한 validator.js를 기반으로 한다. 그러므로 파슬리는 validator.js와 검증을 공유하고 Callback Assert를 사용하여 새로운 것을 정의할 수 있다.

파슬리 프로젝트에 validator.js를 사용하라 파슬리는 window.ParsleyValidator.Validator 로 validator.js를 사용할 수 있다.

Parsley 검증기 목록

Name	API	Description
Required #2.0	HTML5 required data-parsley-required data-parsley-required="true data-parsley-required=""false	필수(required) 필드가 빈값인지 검증한다. 만일 data-pasley-required="false"가 설정되면, 검증이 비활성화되고 필드에 required가 작동하지 않는다.
Email #2.0	HTML5 type="email" data-parsley-type="email"	이메일 주소를 검증한다.
Number #2.0	data-parsley-type="number"	숫자 값을 검증. 경고! HTML5 type="number"는 아래의 integer 검증에 바인딩된다.
Integer #2.0	HTML5 type="number data-parsley-type="integer"	정수인지 검증한다.
Digits #2.0	data-parsley-type="digits"	오직 숫자만 사용했는지 검증
Alphanum #2.0	data-parsley-type="alphanum"	알파벳 문자열인지 검증
Url #2.0	HTML5 type="url" data-parsley-type="url"	유효한 URL인지 확인
Minlength #2.0	HTML5 minlength="6" data-parsley-minlength="6"	문자열의 길이가 적어도 주어진 제한과 같은지를 검증
Maxlength #2.0	HTML5 maxlenght="6" data-parsley-maxlength="6"	문자열의 길이가 주어진 제한을 넘지 않았는지를 검증
Length #2.0	data-parsley-length="[6, 10]"	주어진 최소와 최대값 숫자사이에 값인지 검증한다.
Min #2.0	HTML5 min="6" data-parsley-min="6"	주어진 숫자의 최소값보다 크거나 같은지 검증
Max #2.0	HTML5 max="10" data-parsley-max="6"	주어진 숫자의 최대값보다 작거나 같은지 검증
Range #2.0	HTML5 type="range" data-parsley-range="[6,10]"	주어진 숫자의 최소값과 최대값 사이의 숫자인지 검증
Pattern #2.0	HTML5 pattern="\d+" data-parsley-pattern="\d+"	특정 정규표현식과 일치하는지 검증
MinCheck #2.0	data-parsley-mincheck="3"	지정한 최소 숫자만큼 체크박스가 체크되었는지 검증
MaxCheck #2.0	data-parsley-maxcheck="3"	지정한 최대 숫자이하로 체크박스가 체크되었는지 검증
Check #2.0	data-parsley-check="[1,3]"	지정된 최소 최대 숫자사이로 체크박스가 체크되었는지 검증
Equalto #2.0	data-parsley-equalto="#anotherfield"	값이 다른 필드의 값과 동일한지 확인(암호확인에 유용).

기본적으로 HTML5에서 추가된 input 요소들의 type 형식들을 자동적으로 감지하게 되어 있습니다. 하지만 대부분 input 요소들을 type="text"로 사용하고 있다면 위의 data-parsley-type="email"처럼 필드에 이를 직접 추가해줘야 감지합니다. 기본적으로 사용되는 것들은 모두 지원하고 pattern을 사용하여 정규식을 이용할 수도 있습니다.

HTML5 pattern 참고

• pattern="^[가-힣]+$" : 공백없이 한글만 입력가능
• pattern="^[a-z0-9_]{3,20}$" : 영문소문자, 숫자, _(언더바), 최소 3글자에서 최대 20글자만 가능

Parsley 검증기 직접 만들기

물론, 파슬리에 내장된 검증기들은 일반적으로 유용하지만, 필요한 경우 직접 검증기를 만들수 있다. 파슬리는 자신의 검증기를 만들기 쉽다.

parsley.js가 로딩되기 전에 전역지역(globals)에 그것들을 등록한다.

<input type="text" data-parsley-multipleof="3" />

<script type="text/javascript">
window.ParsleyConfig = {
  validators: {
    multipleof: {
      fn: function (value, requirement) {
        return 0 === value % requirement;
      },
      priority: 32
    }
  },
  i18n: {
    en: {
      multipleof: 'This value should be a multiple of %s'
    },
    fr: {
      multipleof: 'Cette valeur doit être un multiple de %s'
    }
  }
};
</script>

혹은 parsley.js가 로딩된 후에 parsleyValidator에 그것들을 등록한다.

<input type="text" data-parsley-multipleof="3" />

<script type="text/javascript">
window.ParsleyValidator
  .addValidator('multipleof', function (value, requirement) {
    return 0 === value % requirement;
  }, 32)
  .addMessage('en', 'multipleof', 'This value should be a multiple of %s')
  .addMessage('fr', 'multipleof', 'Cette valeur doit être un multiple de %s');
</script>

위의 예제는 data-parsley-multipleof="3"라는 새로운 검증기를 만드는 예제이다. 검증기를 호출할 이름과 함수, 그리고 우선순위, 오류메세지를 설정하고 있다.

다음 장에서는 파슬리 UI/UX 그리고 이벤트에 대하여 알아본다.