VueのバリデーションライブラリVeeValidateがサクッと使えて凄い!

VeeValidateとは?

VeeValidateはVue.jsのバリデーションライブラリです。
UI,UXに優れたフォームバリデーションのテンプレートを簡単に導入出来ます。
また、多彩なバリデーションルールがデフォルトで用意されていて、細かいルールやエラーメッセージも作成可能です。

  • 公式Doc

https://vee-validate.logaretm.com/v4/

  • リポジトリ

https://github.com/logaretm/vee-validate

使用例

  • チェックボックス
Image from Gyazo
  • バックエンドとの非同期通信
Image from Gyazo

使い方

dVeeValidateの導入の仕方はnpmとスクリプトタグの2種類があります。

npmの使用

任意のディレクトリで以下コマンドを実行するだけで環境は整います。

yarn add vee-validate@next
# or
npm i vee-validate@next --save

スクリプトタグの使用

スクリプトタグとCDNでvee-validateを使用し、次のようにライブラリをインポートできます。

<script src="https://unpkg.com/vee-validate@next"></script>

signUpフォームを作ってみる

公式のチュートリアルに従ってsignUpフォームをバリデーションしてみます。

完成コード

https://vee-validate.logaretm.com/v4/tutorials/basics

signUpフォームのマークアップ

まずはsignUpフォームをマークアップします。
formタグでinputタグをラップしてあげます。

<template>
<template>
  <div id="app">
    <form @submit.prevent="onSubmit">
      <input type="email" name="email" />

      <button>Sign up for newsletter</button>
    </form>
  </div>
</template>

<script>
export default {
  methods: {
    onSubmit() {
      alert('Submitted');
    },
  },
};
</script>

formタグにsubmit修飾子をつけてイベントを制御します。 

onSubmitにてボタンを押したらアラートを出しています。

バリデーションの追加

先程作ったsignUpフォームにバリデーションを加えていきます。
具体的にはFormFieldコンポーネントを追加しました。

JavaScriptで直接フォームの制御もしていないので、prevent修飾子も必要なくなります。

<template>
  <div id="app">
    <Form @submit="onSubmit">
      <Field name="email" type="email" :rules="validateEmail" />

      <button>Sign up</button>
    </Form>
  </div>
</template>

<script>
import { Form, Field } from 'vee-validate';

export default {
  components: {
    Form,
    Field,
  },
  methods: {
    onSubmit(values) {
      alert(JSON.stringify(values, null, 2));
    },
    validateEmail(value) {
      // if the field is empty
      if (!value) {
        return 'This field is required';
      }

      // if the field is not a valid email
      if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value)) {
        return 'This field must be a valid email';
      }

      // All is good
      return true;
    },
  },
};
</script>

Fieldコンポーネントには有効なemailである事をtype="email" で具体的なバリデーションルールを:rulesのpropsで渡しています。

validateEmailでは空白と文字内容のバリデーションを組み合わせています。

:rulesのpropsを使用すると値が変更する度に実行されます。

### エラーメッセージの追加

昨今のフォームはエラーメッセージまでで1セットである事が多いです。
ここでも絵エラーメッセージまで追加しましょう。

ErrorMessageコンポーネントにはFieldコンポーネントと同じnameを与えればOKです。

<template>
  <div id="app">
    <Form @submit="onSubmit">
      <Field name="email" :rules="validateEmail" />
      <ErrorMessage name="email" />

      <button>Sign up</button>
    </Form>
  </div>
</template>

<script>
import { Form, Field, ErrorMessage } from 'vee-validate';

export default {
  components: {
    Form,
    Field,
    ErrorMessage,
  },
  methods: {
    onSubmit(values) {
      alert(JSON.stringify(values, null, 2));
    },
    validateEmail(value) {
      // if the field is empty
      if (!value) {
        return 'This field is required';
      }

      // if the field is not a valid email
      if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value)) {
        return 'This field must be a valid email';
      }

      // All is good
      return true;
    },
  },
};
</script>

signUpのフォームが完成!

終わりに

簡単ですが VeeValidation の紹介でした。
フロントエンドでのバリデーションは入力補完の意味合いが強いので、UI、UXに優れたライブラリでサクッと実装できると楽ですね。

Vue+Laraveの組み合わせだと、フロント側をVeeValidationでサクッと実装、サーバー側をLaravelのFormrequestを使ってしっかり目に実装という流れで使いそうですね。

Select the fields to be shown. Others will be hidden. Drag and drop to rearrange the order.
  • Image
  • SKU
  • Rating
  • Price
  • Stock
  • Availability
  • Add to cart
  • Description
  • Content
  • Weight
  • Dimensions
  • Additional information
  • Attributes
  • Custom attributes
  • Custom fields
Compare
Wishlist 0
Open wishlist page Continue shopping