Vee-Validate 라이브러리 사용법

최근 Vue 프레임워크로 프로젝트를 진행하게 되면서, 새로운 라이브러리를 사용할 기회가 많아졌다.

이번에 사용해본것은 Vee-Validate 라는 Validation 라이브러리이다.

공식 홈페이지 주소
https://logaretm.github.io/vee-validate/guide/basics.html

VeeValidate 는 현재 버전 3까지 나온 상태이고,
구글 검색 시 버전 2 웹사이트가 같이 나오는데 서로 문법이 다른 점이 굉장히 많으므로 문법을 적용하기 전에 버전 3 사이트인지 꼭 확인해야한다.

Vee-Validate 의 사용법은 생각보다 간단했다.
일단 Vee-Validate 의 핵심적인 기능으로
ValidationProvider
ValidationObserver
extend

그리고 rules 와 flags 가 어떤 기능을 하는지 알면,
쉽게 사용할 수 있다.

1. VeeValidate 를 main.js 에 import

이번 프로젝트는 모듈을 사용하여 각 페이지 또는 기능단위로 Vue Component 를 쪼갠 방식으로 작업하고 있는데,
전역으로 Vee-Validate 를 사용하기 위해서
main.js 에 VeeValidate 를 사용한다고 선언해주었다.

import Vue from 'vue';
import VeeValidate from 'vee-validate';
import App from './src/App';
import { router } from './src/router';
import store from './src/store';

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
  router,
  store,
  VeeValidate
}).$mount('#root');

2. Vee Validate 로 부터 사용할 기능들을 꺼내기

사용하고 싶은 컴포넌트에 가서 script 태그 내부에
import해준다.

import { ValidationObserver, ValidationProvider, extend } from 'vee-validate';

3. Validation Rule 을 정하기

Vee-Validate는 기본적으로 제공하고 있는 Rule 들이 있다.

종류는 공식 홈페이지 참조
https://logaretm.github.io/vee-validate/guide/rules.html#rules

기본적인 사용법은 아래와 같다.

• 사용하고 싶은 rule을 vee-validate/dist/rules 에서 꺼낸다.

import {
  numeric,
  alpha_dash,
  alpha_spaces,
  required
} from 'vee-validate/dist/rules';

• ValidationProvider 에 rules 라는 이름으로 사용하고 싶은 rule을 넘겨주고,
• ValidationProvider 에 errors 라는 이름의 v-slot을 생성. (provider 가 errors를 자동으로 생성해준다.)
  v-slot="{errors}"
• 에러 메세지를 보여주고 싶은 태그 내부에
  {{ errors[0] }}

errors 는 기본적으로 배열 내부에 메세지를 설정하는 대로 여러개 추가되거나 덮어쓰기 되는 구조이기 때문에 [0] 을 명시해서 디폴트 메세지를 불러와야한다.

<ValidationProvider rules="alpha_dash" v-slot="{ errors }">
  <input v-model="value" type="text">
  <span>{{ errors[0] }}</span>
</ValidationProvider>

여러가지 룰을 적용하고 싶다면,
| 연산자를 사용하여 여러개를 추가해주자.

<ValidationProvider rules="alpha_dash|numeric|required" v-slot="{ errors }">
  <input v-model="value" type="text">
  <span>{{ errors[0] }}</span>
</ValidationProvider>

새로운 rule 을 추가하기

extend 를 사용하면 아래와 같은 방식으로
새로운 rule 을 추가할 수 있다.

아래 예시는 odd라는 이름으로 홀수만 return 하는 rule 을 생성했다.

import { extend } from 'vee-validate';

extend('odd', value => {
  return value % 2 !== 0;
});

에러 메세지를 변경하기

처음 굉장히 헷갈렸던 부분이 에러 메세지를 변경하는 것이었다.
제공된 rule 을 불러와서 사용하면, 지정된 영문 디폴트 메세지가 있다. localize 하여 한국어 버전을 사용하는 방법도 있지만, 그것보다 나는 직접 메세지를 작성하고 싶어서 방법을 한참 찾아보았다.

• 예시 1
  원래 vee-validate 가 제공하는 rule을 가져와서
  메세지를 바꾸고 싶을 때는 아래와 같이 적으면 된다.

extend('required', {
  ...required,
  message: '필수 입력항목입니다.'
});

• 예시 2
  아래 예시는 최소 글자 수를 지정하는 rule 인데,
  이 rule을 여러번 사용하고 싶었기 때문에 인풋 필드의 이름과
  min 이라는 이름으로 parameter 를 받아서
  에러메세지를 자동으로 생성하도록 만들었다.

extend('min', {
  validate(value, { min }) {
    if (value.length >= min) {
      return true;
    }
    return '{_field_}는 {min} 글자 이상이어야 합니다.';
  },
  params: ['min']
});

이처럼 parameter 가 필요한 부분에서는
validationprovider 에서 아래와 같이 parameter 를 내려줄 수 있다.

 <validation-provider
     name="아이디"
     rules="required|alpha_dash|min:5|max:20"
     v-slot="{ errors, classes }"
 >
  <p class="validation-text">{{ errors[0] }}
  </p>
</validation-provider>

{_field_} 는 ValidationProvider 가 기본적으로 제공하는 기능이여서 따로 명시해줄 필요가 없고 validation-povider 에 name 으로 넘겨준 값을 그대로 표시해준다.

• 예시 3
  아래 예시는 한글, 영문, 숫자를 체크하는 정규표현식을 사용하여 custom rule 에 메세지를 추가하였다.

extend('korAlphaNum', {
  validate: value => {
    let regex = /^[가-힣|aA-zZ|0-9]*$/.test(value);
    if (!regex) {
      return '올바른 한글, 영문, 숫자만 입력해주세요.';
    } else {
      return true;
    }
  }
});

Flags 는
validation 에 따라서 class 바인딩을 하고 싶을 때 매우 효과적으로 쓰이는데, 다음에 자세히 알아보도록하자.

https://logaretm.github.io/vee-validate/guide/state.html#flags