Vee-validate 커스텀 Validation

created: function() {
  this.$validator.extend('customRule', {
    getMessage: function(field, args) {
      return '오류 메세지';
    },
 
    validate: function(value, args) {
      // 체크 로직
      return true;
    }
  });
}

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

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

스크립트 상으로도 추가할 수 있다.

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

 

다양한 Vee-validate 커스터마이징 방법

vee-validate.logaretm.com/v2/guide/custom-rules.html#require-like-rules

Custom Rules | VeeValidate

 

v-model 에 매핑되어 있는 값이 null, '', undefined일 경우 v-validate 적용 안되는 현상

empty value면, 다른 validation을 진행하지 않는다고 한다. 따라서 v-validate.continues 처럼 써야한다.

 

bollean true,false 뿐만 아니라 어떤 값 까지도 같이 보내고 싶을 경우

Additionally, you may want to provide a reason for failing the validation that may change the error message. For example, you may be using an external API and the error message is generated there.

const myRule = {
  getMessage(field, params, data) {
      return (data && data.message) || 'Something went wrong';
  },
  validate(value) {
    return new Promise(resolve => {
      resolve({
        valid: value === 'trigger' ? false : !! value,
        data: value !== 'trigger' ? undefined : { message: 'Not this value' }
      });
    });
  }
};