" />
本ページはプロモーションが含まれています。

スポンサーリンク

Vue.js

VueのバリデーションでVuelidate.jsは実案件でも使える

Vuelidateが良いと思った理由

開発が始まったとき、最初に決めておいた方が良いものの1つにバリデーション(単項目チェック)があります。

フロントがVueであれば、Vuelidateは使い勝手が良いです。

  • 独自のバリデーションロジックを組めます。
  • 動的に追加された配列内要素のバリデーションもできます。($each を使います)
  • エラー内容の表示をカスタマイズできます。
  • エラー内容は$vを使って、ロジック内から自由に制御できます。

他のライブラリと比較したわけではないですが、Vuelidateを実案件で使ってみて、実用に耐えうると感じました。

注意点 画面要素をちゃんとコンポーネント化しておくこと。

画面が大きい場合、モーダルダイアログで入力してもらう項目がある場合は、適切にコンポーネント化しておくと、Vuelidateを使うときに見通しが良くなります。

各コンポーネント単体にVuelidate定義を仕込むのがおすすめです。親画面でまとめてだと巨大になりすぎて可読性がとても悪くなります。

スポンサーリンク

-Vue.js