LoginSignup
17
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@tk07Sky(たいくん)

Nuxt.jsとVeeValidate3でお手軽バリデーション

Last updated at Posted at 2019-11-30

diffeasy Advent Calendar 2019 の1日目の記事です。

みなさん、アプリケーションのバリデーションチェック、どうしてますか？
僕は一回、「Vuelidate使ってみた」の記事を書いた時に

「今後はVuelidate使ってみたい」

って書いたんですけど、やっぱり辛くて結局それ以降使ってなかったです😇
（バリデーションをかけるフォームが増えれば増えるほど、エラーのためのcomputedが生え続けるので…）

で今回は、久しぶりにチェックしたらv3に進化してたVeeValidateを使って、お手軽バリデーションを作っていきたいと思います💪

環境

Nuxt.js
VeeValidate v3.1.1

Install

shell
# STEP1: 新規Nuxtプロジェクト生成（既存プロジェクトに導入する場合は飛ばしてOK）
$ yarn create nuxt-app vee-validate-sample && cd $_

# STEP2: VeeValidateのインストールとプラグイン作成
$ yarn add vee-validate
$ vim ./plugins/vee-validate.js
plugins/vee-validate.js
import Vue from 'vue';
import { ValidationObserver, ValidationProvider, extend } from 'vee-validate';
import ja from 'vee-validate/dist/locale/ja.json';

// VeeValidate2と違って、公式が提供しているバリデーションルールは自分で入れる必要があるので、全ルールをインポートする
// (公式のルールを使わない場合は記述しなくて良い）
// 公式のルールはこちら
// https://logaretm.github.io/vee-validate/guide/rules.html#rules
import * as originalRules from 'vee-validate/dist/rules';
for (let rule in originalRules) {
  extend(rule, {
    ...originalRules[rule],
    message: ja.messages[rule],
  });
}

// バリデーションメッセージの日本語化
localize({
  ja: { messages: { ...ja.messages } },
});
localize('ja');

Vue.component('ValidationProvider', ValidationProvider);
Vue.component('ValidationObserver', ValidationObserver);

↑をコピペして貼り付けたら ESC → wq → Enter

shell
$ vim nuxt.config.js
nuxt.config.js
export default {
  // ↑で書いたプラグインを選択
  plugins: ['@/plugins/vee-validate.js'],
  ...
  build: {
    // Nuxt.jsではbuildのtranspileにこの設定が必要になる。
    // 詳しく知りたい人はこちら
    // https://logaretm.github.io/vee-validate/guide/rules.html#importing-rules-in-nuxt-js
    transpile: ['vee-validate/dist/rules'],
    ...
  },
};

↑をコピペして貼り付けたら ESC → wq → Enter

Using

VeeValidate3を使う上で、大きく2つのコンポーネントが存在します。
それはValidationProviderとValidationObserverです。

ValidationProvider

ValidationProviderで入力項目を囲む（一つだけ）と、中にある入力項目に対してバリデーションをかけることができます。
ValidationProviderの中には、1つ以上のv-modelを持つ入力フォーム(inputなど)が必要です。
主な機能は下の感じです。

  • rulesオプションにバリデーションルールを記述する
    • ルールを記述する際はString、もしくはv-bind:rulesにObjectで書く
    • ex. String→rules="required" Object→:rules="{ required: true }"
  • v-slotでエラー状態を配列で受け取ったり、バリデーションの状態を受け取ることができる

使用例

index.vue
<template>
  <ValidationProvider v-slot="{ errors }" rules="required|email">
    <input type="email" v-model="email" />
    <span>{{ errors[0] }}</span>
  </ValidationProvider>
</template>

<script>
export default {
  data() {
    return {
      email: '',
    };
  },
};
</script>

ValidationObserver

ValidationObserverを使うと、バリデーショングループを作ることができます。
バリデーショングループを作ると、ValidationProviderの状態（今バリデーションに通っているか通っていないか、など）を見たりすることができます。
ValidationObserverの中には、1つ以上のValidationProviderが必要です。
主な機能は下の感じです。

  • v-slotでhandleSubmit(methods)を受け取れば、バリデーションルールに通った後、アクションを実行することができる
  • v-slotでは他に、valid時、invalid時などの状態も取得でき、バリデーションに引っかかっていたらボタンを非活性にする、などが簡単にできる

使用例

index.vue
<template>
  <ValidationObserver v-slot="{ handleSubmit, invalid }">
    <form @submit.prevent="handleSubmit(login)">
      <!-- email -->
      <ValidationProvider v-slot="{ errors }" rules="required|email">
        <label>
          メールアドレス:
          <input type="email" v-model="email" />
        </label>
      </ValidationProvider>
      <!-- password -->
      <ValidationProvider v-slot="{ errors }" rules="required">
        <label>
          パスワード:
          <input type="password" v-model="password" />
        </label>
      </ValidationProvider>
      <button type="submit" :disabled="invalid">ログイン</button>
    </form>
  </ValidationObserver>
</template>

<script>
export default {
  data() {
    return {
      email: '',
      password: ''
    };
  },
  methods: {
    login() {
      // メールアドレスとパスワードのバリデーションルールに通らないと、このメソッドは実行されない
    },
  },
};
</script>

ValidationObserverタグや、ValidationProviderタグが増えてテンプレートが少し大きくはなりますが、どのフォームにバリデーションをかけているのか明確になるので僕は好きだなぁと思っています✌️

自作バリデーションを作る

VeeValidateを使うと、簡単にバリデーションを作ることができます。
「パスワードは何文字以上で〜」とかサービスによって変化すると思いますが、もしそうであってもサクッと自作できるので安心してください。

例えば、ひらがなのみ入力するフォーム用のバリデーションを作ってみましょう。
下のように、バリデーションルールを作ってVeeValidateのextendメソッドで登録してあげればいいです。

plugins/vee-validate.js
import Vue from 'vue';
import { ValidationObserver, ValidationProvider, extend } from 'vee-validate';
import ja from 'vee-validate/dist/locale/ja.json';

import * as originalRules from 'vee-validate/dist/rules';
for (let rule in originalRules) {
  extend(rule, {
    ...originalRules[rule],
    message: ja.messages[rule],
  });
}

// ひらがなバリデーションを追加する
const hiragana = /^[\u3040-\u309f\u0020\u00a0\u3000\u30fb\u30fc]+$/;
const isHiragana = {
  message: 'This field input in Hiragana.',
  validate(value) {
    return hiragana.test(value);
  },
};
extend('isHiragana', isHiragana);

// バリデーションメッセージの日本語化
localize({
  ja: { messages: { ...ja.messages } },
});
localize('ja');

Vue.component('ValidationProvider', ValidationProvider);
Vue.component('ValidationObserver', ValidationObserver);

これで、ValidationProviderのrulesに追加してあげれば、ひらがな以外が入力された際にバリデーションエラーが発火すると思います。

index.vue
<template>
  <!-- 必須入力とひらがなバリデーションを追加 -->
  <ValidationProvider v-slot="{ errors }" rules="required|isHiragana">
    <input type="text" v-model="hiragana" />
    <span>{{ errors[0] }}</span>
  </ValidationProvider>
</template>

バリデーションメッセージを独自で編集

バリデーションメッセージは、時に独自でつけたい時があるかと思います。
そんなときも、VeeValidateならサクサク登録できます。

例えば、さっき登録したひらがなバリデーションルール用にメッセージを追加してみます。
下のように、バリデーションメッセージを任意の名前をつけて作って登録し、ValidationProviderのnameにその名前を登録すると、バリデーションメッセージが独自のものに切り替わると思います。

plugins/vee-validate.js
import Vue from 'vue';
import { ValidationObserver, ValidationProvider, extend } from 'vee-validate';
import ja from 'vee-validate/dist/locale/ja.json';

import * as originalRules from 'vee-validate/dist/rules';
for (let rule in originalRules) {
  extend(rule, {
    ...originalRules[rule],
    message: ja.messages[rule],
  });
}

const hiragana = /^[\u3040-\u309f\u0020\u00a0\u3000\u30fb\u30fc]+$/;
const isHiragana = {
  message: 'This field input in Hiragana.',
  validate(value) {
    return hiragana.test(value);
  },
};
extend('isHiragana', isHiragana);

// 独自メッセージを作って登録
const originalValidationMessage = {
  fields: {
    furigana: {
      required: 'この欄は必須入力です',
      isHiragana: 'この欄はひらがなで入力してください',
    },
  },
};
localize({
  ja: { ...originalValidationMessage, messages: { ...ja.messages } },
});
localize('ja');

Vue.component('ValidationProvider', ValidationProvider);
Vue.component('ValidationObserver', ValidationObserver);
index.vue
<template>
  <!-- nameに"furigana"を設定する -->
  <ValidationProvider v-slot="{ errors }" rules="required|isHiragana" name="furigana">
    <input type="text" v-model="hiragana" />
    <!-- ここに表示されるメッセージが、"furigana"で設定したメッセージに切り替わる -->
    <span>{{ errors[0] }}</span>
  </ValidationProvider>
</template>

おわりに

一通り読んでいただいて、簡単にバリデーションを追加できると思いませんか？
アプリケーションを爆速で作る上で、バリデーションどうするか問題って結構あると思っていますし、全部自分で書くってなったら結構辛いと思います。
もし「良さそうだな〜」って思っていただけたら、ぜひ導入を検討してみてください👋

17
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
17
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?