SPAだけじゃない！Vue.js[4] プラグインでさらに便利に拡張する〜vuelidateでフォーム検証〜

つっちー

2018.07.10

こんにちは。フロントエンドエンジニアのつっちーです。

引き続き、「サーバーサイドテンプレートやHTMLファイルへのマークアップに対して、Vue.jsを使用する方法」に的を絞り、Vue.jsについて書いていきます。前回の記事はこちらです。

SPAだけじゃない！Vue.js[3] プラグインでさらに便利に拡張する〜vue-lazyloadで画像の遅延読込〜

つっちー

2018.04.10

前回は、遅延読み込み機能を例に、プラグインの使い方について見ていきました。今回は、そのほかにも多く存在する便利なプラグインのひとつとして、フォーム検証機能を実現する「vuelidate」について取り上げたいと思います。

vuelidateを使用してフォームを検証する
まとめ

vuelidateを使用してフォームを検証する

こちらが今回作成するフォームの完成形です。

See the Pen vuelidate-completed by ligdsktschy (@lig-dsktschy) on CodePen.

入力に応じて、必須項目設定、最小文字数設定、送信前の同意チェックなど、一般的によく使用される検証の実行を確認できるかと思います。これらの検証機能は、すべてプラグイン「vuelidate」によって実現しています。この「vuelidate」は、「awesome-vue」だけでなく「Vue Curated」でも紹介されており、数あるプラグインの中でもとくに高品質なものといえそうです。

それでは上記のフォームの実装を、4段階にわけて紹介していきます。

以降の例では、Codepenの機能によって、あらかじめ下記のscriptタグが挿入されていることにご注意ください。

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuelidate@0.7.4/dist/vuelidate.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuelidate@0.7.4/dist/validators.min.js"></script>

ES Modulesのimportと、Webpackなどのモジュールバンドラーを用いた読み込みでも、同様に動作します。

利用しているVue.jsのバージョンは2.5.16です。

また、この連載では、SPA制作においてはVueのコンポーネント機能を用いて実装すべき部分を、Vueインスタンスとして実装します。SPA制作における、「1Vueインスタンス=1アプリケーション」、「1コンポーネント=1部品」の扱い方とは異なることにご注意ください。

プラグインの導入

See the Pen vuelidate-01 by ligdsktschy (@lig-dsktschy) on CodePen.

まずはプラグインの導入です。前回同様、CDNを利用してwindowオブジェクトに格納したプラグインオブジェクトを、Vue.useメソッドに渡します。あわせて、プラグインオブジェクトと一緒にCDNから取得してあるvalidatorsの中身を確認しておきましょう。これは「vuelidate」とセットで提供されている、さまざまな検証処理が格納されたオブジェクトで、すべて検証結果をtrueかfalseで返してくれます。併用すると非常に便利です。

テキスト入力を検証してみる

See the Pen vuelidate-02 by ligdsktschy (@lig-dsktschy) on CodePen.

試しに、テキスト入力を検証してみました。「vuelidate」の設定は、オプションオブジェクトのvalidations属性に記述します。validations属性とdata属性とでキーを対応させ、data属性をテンプレートのinput要素と結びつければ、準備完了です。

Name欄にフォーカスし、適当にテキストを入力したあと、テキストをすべて削除してみてください。Name欄の後ろに「Required.」と表示されましたでしょうか。これは、入力欄が初期状態から変更されていて、かつ、入力がない場合に警告文を表示する、という実装になっているためです。

検証結果に応じて送信ボタンの挙動を切り替える

See the Pen vuelidate-03 by ligdsktschy (@lig-dsktschy) on CodePen.

続いて、送信可能な状態であるかどうかを検証しています。Name欄にテキストを入力するまで、Submitボタンが押下できないことが確認できるかと思います。設定された検証すべてを通過している場合にのみボタンが有効となり、念のため送信処理実行前にも同じ検証が行われる実装になっています。

さまざまな種類の検証を試してみる

See the Pen vuelidate-04 by ligdsktschy (@lig-dsktschy) on CodePen.

入力されているかどうか以外にも、さまざまな種類の検証が実施できます。この例では下記の検証を例示しています。

数値であるか
指定範囲の数値であるか
メールアドレスであるか
指定文字数以上であるか
2つの入力が一致しているか

あとは、ここまでご紹介した手順を応用して入力欄と検証設定を増やせば、最初に紹介した完成形のできあがりです。
※なお、今回の例では掲載用に送信実行処理がコメントアウトされていることにご注意ください。

まとめ

「サーバーサイドテンプレートやHTMLファイルへのマークアップに対して、Vue.jsを使用する方法」について、4回にわたって見てきましたが、いかがだったでしょうか。

Vue.jsはSPAだけでなく、サーバーサイドテンプレートやHTMLファイルへのマークアップにも活用することが可能です。それひとつで多くのケースに対応できる技術は、触れていられる時間も多くなるため、理解の深まる速度も自然と速くなり使っていて気持ちがいいですね（JavaScript自体もそうですよね）。

Vue.js、今後もどんどんを使っていきたいと思います。それではまた！つっちーでした。

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る