VeeValidateを使ってみる

フォームのバリデーションを実装できるVue.jsのライブラリ「VeeValidate」を使ってみます。

設定方法

設定前に使用するバージョンの確認ですが、Vue2系の場合はVeeValidateの2系か3系、Vue3系の場合はVeeValidateの4系を使うといいようです。
今回はVue2系とVeeValidateの3.4.13を使用します。

ライブラリのインストールはいくつか方法がありますが、今回は簡易に使うためCDNを使用してみます。

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vee-validate@3.4.13/dist/vee-validate.js"></script>

バリデーションのルールを追加して、コンポーネントを定義します。

// バリデーションルールを追加
VeeValidate.extend('test', {
  validate: value => value === 'test',
  message: 'test 以外の入力はエラーになります。'
});

var app = new Vue({
  el: '#app',
  data: {
    email: ''
  },
  components: {
    ValidationProvider: VeeValidate.ValidationProvider
  }
});

上記で定義したValidationProviderで、フォームの入力パーツを囲って実装します。

<div id="app">
  <validation-provider rules="test" v-slot="{ errors }">
    <input v-model="email" type="text" />
    <span>{{ errors[0] }}</span>
  </validation-provider>
</div>

今回はCDNを使用しているためケバブケース(validation-provider)にしていますが、通常はキャメルケース(ValidationProvider)での実装になります。
これで「test」以外の文字列以外の場合はエラーが表示されるようになりました。
VeeValidateのデモページ

ルールを複数設定することも可能です。

// バリデーションルールを追加
VeeValidate.extend('min', {
  validate: value => value.length >= 3,
  message: '3桁未満はエラーになります。'
});
VeeValidate.extend('odd', {
  validate: value => value % 2 !== 0,
  message: '偶数はエラーになります。'
});

var app = new Vue({
  el: '#app',
  data: {
    value: ''
  },
  components: {
    ValidationProvider: VeeValidate.ValidationProvider
  }
});

ルールを複数設定する場合、パイプライン(|)でルールを区切ります。

<div id="app">
  <validation-provider rules="min|odd" v-slot="{ errors }">
    <input v-model="value" type="number" />
    <span>{{ errors[0] }}</span>
  </validation-provider>
</div>

これで3桁未満または偶数の場合にエラーが表示されるようになりました。
VeeValidateのデモページ2

ルール設定の際に引数を設定することもできます。
例として、最小値と最大値を設定できるようにしてみます。

<div id="app">
  <validation-provider rules="minmax:3,8" v-slot="{ errors }">
    <input v-model="value" type="number" />
    <span>{{ errors[0] }}</span>
  </validation-provider>
</div>

ルールの後にコロン(:)を追加して、引数を設定します。

// バリデーションルールを追加
VeeValidate.extend('minmax', {
  validate(value, {min, max}) {
    return value.length >= min && value.length <= max;
  },
  params: ['min', 'max'],
  message: '3〜8桁以外はエラーになります。'
});

var app = new Vue({
  el: '#app',
  data: {
    value: ''
  },
  components: {
    ValidationProvider: VeeValidate.ValidationProvider
  }
});

paramsプロパティで使用できる引数名を定義した上で、validateメソッドの2番目のパラメータで取得します。
VeeValidateのデモページ3

「【フィールド名】は必須項目です。」や「X桁以上で入力してください。」など、エラーメッセージで使用するテキストの一部をフィールド名などから取得したい場合も設定できます。

// バリデーションルールを追加
VeeValidate.extend('minmax', {
  validate(value, {min, max}) {
    return value.length >= min && value.length <= max;
  },
  params: ['min', 'max'],
  message: 'フィールド名:{_field_} min:{min} max:{max}'
});

var app = new Vue({
  el: '#app',
  data: {
    value: ''
  },
  components: {
    ValidationProvider: VeeValidate.ValidationProvider
  }
});

フィールド名は{_field_}、ルールの引数は{min}や{max}などで設定できます。
フィールド名はValidationProviderにname属性で設定します。

<div id="app">
  <validation-provider name="フィールド名" rules="minmax:3,8" v-slot="{ errors }">
    <input v-model="value" type="number" />
    <span>{{ errors[0] }}</span>
  </validation-provider>
</div>

VeeValidateのデモページ4

ここまでバリデーションのルールを独自で作成してきましたが、ライブラリ側でも用意されています。
前出のCDNだと含まれていないようだったので、読み込むファイルをvee-validate.full.jsに変更します。

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vee-validate@3.4.13/dist/vee-validate.full.js"></script>

例としてメールアドレスのバリデーションを試してみます。

<div id="app">
  <validation-provider name="email" rules="email" v-slot="{ errors }">
    <input v-model="email" type="email" />
    <span>{{ errors[0] }}</span>
  </validation-provider>
</div>

ライブラリで用意されているルールなので、バリデーションルールの追加は特に不要です。

var app = new Vue({
  el: '#app',
  data: {
    email: ''
  },
  components: {
    ValidationProvider: VeeValidate.ValidationProvider
  }
});

これでメールアドレスの形式チェックができました。
VeeValidateのデモページ5

他にも色々な種類があるので、詳しくは公式ドキュメントでご確認ください。