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

  • 2021年7月29日
  • 2021年10月27日
  • Vue.js
  • 611view

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を使ってしっかり目に実装という流れで使いそうですね。

初めてweb開発の現場に入った時にVue.jsの勉強用に買った本を思い出に添付。

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
Click outside to hide the compare bar
Compare
Compare ×
Let's Compare! Continue shopping