실시 내용

Vue(TypeScript)로 VeeValidate를 사용한 밸리데이션을 실시한 메모입니다. Vuetify를 사용하고 있습니다. Vue는 Vue.extend 방식을 사용합니다. 별로 자세한 설명은 기재되어 있지 않습니다.

운영 환경

Node.js v12.18.3

npm 6.14.8

vue-cli 4.5.6

vue 2.6.12

vuetify 2.2.11

사용법

설치

npm install --save vee-validate

import

import Vue from 'vue';
import { ValidationProvider, ValidationObserver, extend } from 'vee-validate';
import { required, email } from 'vee-validate/dist/rules';

구성요소
용도


ValidationProvider
지정된 항목으로 유효성 검사

ValidationObserver
여러 유효성 검사 그룹화

extend
규칙 편집

규칙 지정

규칙 목록

sample.vue

// 編集なし（デフォルトのルール・メッセージを使用
extend('email', email);

// デフォルトのメッセージを上書き
extend('required', {
  ...required,
  message: '{_field_}は必須項目です。'
});

{_field_}에는 ValidationProvider의 name 요소가 할당됩니다.

메시지는 상기와 같이 사용하는 룰만 일본어로 재기록하는 방법과, 디폴트로 모두 일본어로 하는 방법이 있다. 일본어화에 대해서는, 여기 .
기본 메시지는 아래에 설명되어 있습니다.
영어→ node_modules/vee-validate/dist/locale/en.json

components에 등록

그대로.

sample.vue

export default Vue.extend({
  name: 'Login',
  components: {
    ValidationProvider,
    ValidationObserver,
  },
  ...

v-text-field에 유효성 검증 추가

v-text-field를 validation-provider로 묶습니다.

sample.vue

<validation-provider v-slot="{ errors }" name="User ID" rules="required">
  <v-text-field
    prepend-icon="mdi-account-circle"
    label="User ID"
    v-model="user.userId"
    :error-messages="errors"
  />
</validation-provider>

v-slot에서 오류 메시지와 같은 다양한 값을 가져옵니다. 위의 예에서 오류 메시지를 얻고 v-text-field 오류 메시지를 입력했습니다.
규칙은 복수 지정 가능. 예 rules="required|email"
예


그 외 v-slot 로 취득할 수 있는 값은 여기 .

유효성 검사 그룹화

이 경우 v-form를 ValidationObserver로 묶습니다.

Sample.vue

          <ValidationObserver ref="observer" v-slot="{ invalid }">
            <v-form>
              <v-container>
                <validation-provider v-slot="{ errors }" name="User ID" rules="required">
                  <v-text-field
                    prepend-icon="mdi-account-circle"
                    label="User ID"
                    v-model="user.userId"
                    :error-messages="errors"
                    @input="input"
                  />
                </validation-provider>
                <validation-provider v-slot="{ errors }" name="Password" rules="required">
                  <v-text-field
                    prepend-icon="mdi-account-lock"
                    type="password"
                    label="Password"
                    v-model="user.password"
                    :error-messages="errors"
                  />
                </validation-provider>
              </v-container>
            </v-form>
            <v-btn type="submit" @click="doLogin" :loading="loading" :disabled="invalid">
              ログイン<v-icon>mdi-login</v-icon>
            </v-btn>
          </ValidationObserver>

이 상태에서는 User Id와 Password 2개의 밸리데이션을 ValidationObserver로 확인한다. 여기서도 v-slot에서 오류 메시지와 같은 다양한 값을 얻을 수 있습니다. 위의 예에서는 invalid에서 두 가지 유효성 검사가 성공했는지 확인하고 로그인 버튼의 활성화 및 비활성화를 제어합니다 (:disabled="invalid"). 따라서 User Id와 Password를 모두 입력하지 않으면 버튼이 활성화되지 않습니다.

그 외 v-slot 로 취득할 수 있는 값은 여기 .

$refs를 사용한 ValidationObserver 제어(잡았을 때)

vue method 내에서 밸리데이션을 리셋트 하고 싶을 때 등에, $refs 를 이용해 ValidationObserver Compornent API 에 액세스 하는 것이 필요하게 된다. 여기서, Typescript를 사용하고 있다고 기재 방법에 버릇이 있다.
공식 문서에 기재된 방법은 Vue.extend의 패턴과 일치하지 않았기 때문에 다음 방법으로 수행 하였다.

Sample.vue

    ...
    resetForm() {
      this.user.userId = '';
      this.user.password = '';
      (this.$refs.observer as InstanceType<typeof ValidationObserver>).reset();
    },

이렇게 설명하면 reset（）를 사용할 수 있습니다.
이번 예라면,

<ValidationObserver ref="observer" v-slot="{ invalid }">

에서 감지한 유효성 검사 오류

(this.$refs.observer as InstanceType<typeof ValidationObserver>).reset();

로 리셋하게 된다.

이것에 시간이 걸렸습니다,,,

일본어화

마지막으로, 메시지를 모두 일본어화한다.
공식 문서

먼저 tsconfig.json를 편집합니다.

tsconfig.json

{
  "compilerOptions": {
    // ...
    "resolveJsonModule": true,
    "esModuleInterop": true
    // ...
  }
}

import 그 2+

localize와 일본어 메시지를 포함하는 ja.json를 가져옵니다. 또한 localize에서 일본어를 활성화합니다.

Sample.vue

// localize追加
import { ValidationProvider, ValidationObserver, localize, extend } from 'vee-validate';
// 追加
import ja from 'vee-validate/dist/locale/ja.json';

localize('ja', ja);

일본어 메시지 목록 → vee-validate/dist/locale/ja.json
이상.