VeeValidateって何。

今日はバディ面談で河原さんと就活に関してお話ししたり、Discordで西村さんとお話ししたりして、エンジニアになる決意がより一層強まったぞ!みんなもバディさんや西村さんを頼ってくれよな!

#らんてくん感

 

さて、今回はバリデーションに関して。

ログインをする時や診断をする時、必ずフォームに値を入力しますよね。

 

入力内容に誤りがあった場合、DBにアクセスする(送信ボタンやログインボタンを押す)前にどこにエラーがあるかわかった方が二度手間を防げていいなって思いました。

 

それをフロントで実装してくれるものがVeeValidateだそうで。学習していきます。

VeeValidateって何

Vue.jsのために開発された、バリデーション実装のテンプレート。

簡潔にバリデーションを描くことができる。

どう書くの?

plugin/vee-validate.jsに下記のように書き込む。

import Vue from 'vue';
import VeeValidate from 'vee-validate';

Vue.use(VeeValidate);

エントリーファイルに差し込む

import Vue from 'vue';
import App from '../App';
import * as VeeValidate from '../plugins/vee-validate';

document.addEventListener('DOMContentLoaded', () => {
  const app = new Vue({
    VeeValidate,
    render: (h) => h(App),
  }).$mount();

  document.body.appendChild(app.$el);

  console.log(app);
});

 

VeeValidateは、rubyがUser < ApplicationRecordとするとvalidate:を使えるように、vee-validate/dist/rulesから必要なバリデーションメソッドをimportしてくると各種バリデーションを使うことができるようになる。

import { required, email, min, max, regex, confirmed } from 'vee-validate/dist/rules';

主要なオプションメソッド

alpha_num 数字とアルファベットのみ 全角は対象外
between 数値の範囲
confirmed 確認用フィールド
required_if あるフィールドが特定の値の場合のみ別フィールドを必須にする
アップロードするファイルの拡張子や MIME type チェック、ファイルサイズチェックなど

実際の使い方

ログイン画面では下記のように:rulesを使って記述する。ちなみに:はv-bindの省略形。#はv-slotで、@はv-on。最大10文字かつ必須項目というバリデーションをかけている。

<v-card-text>
        <ValidationProvider
          v-slot="{ errors }"
          mode="blur"
          :rules="{ required: true,max: 10 }"
          name="ニックネーム"
        >
          <v-text-field
            id="user-nickname"
            type="text"
            label="ニックネーム"
            :value="nickname"
            :error-messages="errors"
            @input="$emit('update:nickname', $event)"
          />
        </ValidationProvider>

:error-messages="errors"のように双方向バインディングをすることで、:rulesにマッチしなかった場合に、slotにerrorsを渡すことができる。

ValidationProviderはバリデーションを効かせたい箇所を包むメソッド。

何が美味しいの?

簡単で、フレキシブルで、選択の自由がある点が美味しいと公式サイトでは述べられている。

  • ルール、メッセージ定義の共通化が容易
  • よくあるルールはあらかじめ組み込まれている
  • 複数のフィールドに対するバリデーションに対応

所感

  • 一意のユーザーかどうか判別する記述が難しい。
extend('isUnique', {
  params: ['column'],
  async validate(value, { column }) {
    let response = await axios.get('validations/unique', { params: { [column]: value } });
    if (response.data === 'unique') {
      return true;
    } else {
      return '{_value_}は既に使われています';
    }
  },

VeeValidate

Vue.js のフォームバリデーションライブラリ VeeValidate を評価してみた | DevelopersIO