VeeValidateとは？
VeeValidateはVue.jsのバリデーションライブラリです。
UI,UXに優れたフォームバリデーションのテンプレートを簡単に導入出来ます。
また、多彩なバリデーションルールがデフォルトで用意されていて、細かいルールやエラーメッセージも作成可能です。
- 公式Doc
https://vee-validate.logaretm.com/v4/
- リポジトリ
https://github.com/logaretm/vee-validate
使用例
- チェックボックス
- バックエンドとの非同期通信
使い方
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フォームにバリデーションを加えていきます。
具体的にはForm、Fieldコンポーネントを追加しました。
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の勉強用に買った本を思い出に添付。