vue.js目次VeeValidateとは環境インストール導入手順バリデーションルール言語設定カスタムルールIE11でエラーが発生した場合ユースケースさいごにVeeValidateとはVeeValidateは、Vue.js用のバリデーションコンポーネントライブラリです。全部で27種類のバリデーションパターンを備えています。Vue.js用のバリデーションでは最大の人気があります。1万7千超えの超モンスター級に人気です。3.2.3インストール以下のnpm、yarn、CDNを使ってインストールします。protected]/dist/rules.umd.min.js"></script>gitリポジトリは以下から取得できます。[注意]モジュール版は未検証です。この2つの使い分けは以下になります。各フィールドを監視するのに使用します。フォーム全体を監視するのに使用します。各フィールドでエラーが発生している時に、ボタンを非表示するなどができます。プロパティで、各フォームの取得したい状態を得ます。プロパティにバリデーションルール名を設定します。サンプルはHTML直書きを想定しているため、ケバブケースに置き換えています。</validation-observer></div>サンプル>>専用ページで確認するバリデーションルールalpha検証中のフィールドには、アルファベット文字のみを含めることができます。}}</span></ValidationProvider>alpha_dash検証中のフィールドには、アルファベット文字、数字、ダッシュまたはアンダースコアが含めることができます。}}</span></ValidationProvider>alpha_num検証中のフィールドには、アルファベット文字または数字を含めることができます。}}</span></ValidationProvider>alpha_spaces検証中のフィールドには、アルファベット文字または半角スペースを含めることができます。}}</span></ValidationProvider>between検証中のフィールドには、最小値と最大値で区切られた数値を設定することができます。}}</span></ValidationProvider>confirmed検証中のフィールドは、確認フィールドと同じ値を設定することができます。</ValidationProvider></ValidationObserver>digits検証中のフィールドは、数値で指定された桁数を設定することができます。}}</span></ValidationProvider>dimensions検証中のフィールドは、追加されるファイルが正確に指定された寸法を持つ画像(jpg、svg、jpeg、png、bmp、gif)を設定することができます。}}</span></ValidationProvider>email検証中のフィールドは、有効なメールアドレスを設定することができます。}}</span></ValidationProvider>ext検証中のフィールドに追加されるファイルには、指定された拡張子のいずれかが必要です。}}</span></ValidationProvider>oneOf検証中のフィールドには、指定されたリストにある値が必要です。チェックに二重等号を使用します。===、等価性チェックに使用されます。このルールは、オブジェクト形式で使用するときにパスワードを確認するのに役立ちます。文字列形式を使用すると、引数が文字列として解析されるため、このルールを使用する場合はオブジェクト形式を使用してください。}}</span></ValidationProvider>length検証中のフィールドは指定された長さである必要があります。</div></ValidationProvider>max検証の長さのフィールドは、指定された長さを超えることはできません。}}</span></ValidationProvider>max_value検証中のフィールドは数値である必要があり、指定された値を超えてはなりません。}}</span></ValidationProvider>mimes検証中のフィールドに追加されるファイルタイプには、指定されたMIMEタイプのいずれかが必要です。}}</span></ValidationProvider>min検証の長さの下にあるフィールドは、指定された長さより小さくすることはできません。}}</span></ValidationProvider>min_value検証中のフィールドは数値である必要があり、指定された値より小さくすることはできません。}}</span></ValidationProvider>excluded検証中のフィールドは指定の値を除外して構成する必要があります。</div></ValidationProvider>numeric検証中のフィールドは数字のみで構成する必要があります。}}</span></ValidationProvider>regex検証中のフィールドは、指定された正規表現と一致する必要があります。}}</span></ValidationProvider>required検証中のフィールドには空でない値が必要です。デフォルトでは、「空の値」が必要な場合を除き、すべてのバリデーターは検証に合格します。これらの空の値は次のとおりです。空の文字列、undefined、null、空の配列。}}</span></ValidationProvider>required_if検証中のフィールドは、ターゲットフィールド(最初の引数)が指定された値(他の引数)のいずれかに設定されている場合にのみ、空でない値を持つ必要があります。}}</span></ValidationProvider>size検証中のフィールドに追加されるファイルサイズは、指定されたサイズ(キロバイト単位)を超えてはなりません。}}</span></ValidationProvider>サンプル>>専用ページで確認する言語設定バリデーションのメッセージは基本が英語になっています。これを日本国内で使うのは難しいので、メッセージを日本語に設定します。※モジュール版は未検証です。後に設置しないと上手く動きません。カスタムルールを設定する方法は以下の記事を参考にしてください。VeeValidateのカスタムルールの設定方法(v3系)クロスフィールドフィールドを比較するようなカスタムルールを設定するには以下の記事を参考にしてください。VeeValidateのクロスフィールドカスタムルールの設定方法(v3系)IE11でエラーが発生した場合VeeValidateをIE11で使うとエラーが発生します。対応方法は以下のページで公開してます。VeeValidateがIE11で使えない時の対応方法ユースケースフォームを作っている時に、割と出てくるけどVeeValidateを使う方法が分かりにくい用法を記載していきます。使ってラジオボタンの入力値を監視します。使って強制的にバリデーションを起動しています。}});さいごにVue.js用のバリデーションコンポーネントライブラリでした。ソースコードで目がチカチカするので食わず嫌いをしてきましたが、使ってみたら超便利でした。今後、管理人の実務では、このバリデーションライブラリがメインになってくると思います。更新が間に合わなかった為、公開後に記事の改稿していきます。コメントをキャンセルメールアドレスが公開されることはありません。コメント名前メールアドレスサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。コメントデータの処理方法の詳細はこちらをご覧ください。