Vee-Validate Custom Validation

작성일 Edited on In , Disqus:
Symbols count in article: 621 Reading time ≈ 1 mins.

커스텀 validation을 추가해야할 때가 있다.
created에 $validator 인스턴스를 확장해주면 된다.

소스

1
2
3
4
5
6
7
8
9
10
11
12
created: function() {
  this.$validator.extend('customRule', {
    getMessage: function(field, args) {
      return '오류 메세지';
    },

    validate: function(value, args) {
      // 체크 로직
      return true;
    }
  });
}

모듈형태거나 전역설정이면 import { Validator } from 'vee-validate'; 후에 Validator.extend로 접근하면 된다.

사용법

추가한 룰 이름으로 v-validate 속성에 넣어주면 끝이다.

1
<input type="text" name="help" v-validate="'required|customeRule'" />

스크립트 상에서 추가

attach 메소드로 붙히면 된다.

1
this.$validator.attach('help', 'customRule');

다른 사용법은 공식문서를 참조하자