Vue VeeValidateプラグイン

サンプル

<div id="app">
 <form>
  <input v-validate="'required|max: 10'" data-vv-as="氏名"
   id="name" name="name" />
  <p v-show="errors.has('name')">{{ errors.first('name') }}</p>

  <input v-validate="{numeric:true, between: [20, 60]}" data-vv-as="年齢"
   id="age" name="age" type="number" />
  <p v-show="errors.has('age')">{{ errors.first('age') }}</p>

  <select v-validate="'included:men, women, other'" data-vv-as="性別"
   id="sex" name="sex" >
   <option value="men" selected>男</option>
   <option value="women">女</option>
   <option value="other">その他</option>
  </select>
  <p v-show="errors.has('sex')">{{ errors.first('sex') }}</p>
 </form>
</div>

設定

ライブラリ

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vee-validate@2.2.15/dist/vee-validate.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vee-validate@2.2.15/dist/locale/ja.js"></script>

プラグイン有効化

<script>
 Vue.use(VeeValidate, {
  locale: 'ja',
  オプション
  fastExit: false,
 });

 new Vue({
  el: '#app',
 });
</script>

オプション

オプション 機能 規定値
delay 入力から検証開始までの遅延時間(ミリ秒) 0
dictionay 検証メッセージ null
fastExit 1つの入力項目に複数のエラーがある場合の挙動
最初の1つ目のみ検出する
true
events 検証トリガーイベント input
locale 検証メッセージロケール en

属性

v-validate

検証ルールを設定

書き方
1. 文字列
v-validate =" ' included:男, 女, その他 ' "

2. オブジェクト
v-validate =" { included: [男, 女, その他] } "

data-XXX
属性 機能 備考
data-vv-as エラー表示に使われるフィールド名を設定 name属性とは別にしたい場合に利用
data-vv-name 検証等に使われるフィールド名を設定 name属性とは別にしたい場合に利用
data-vv-delay 検証までの時間を㍉秒で設定

検証ルール

ルール 機能 備考
alpha
between:min, max
confirmed: target targetと同じか
date_format: format
digits: length length桁の数時か
email
included: list
max: length
min: length
max_value: value
min_value: value
numeric
regex: pattern patternにマッチするか
required
size: num numキロbyte以下か
url

検証結果

メソッド 機能 備考
errors.has(検証対象ID) 検証対象エラー有無
errors.first(検証対象ID) 検証対象先頭エラー取得
errors.collect(検証対象ID) 検証対象全エラー取得
errors.all() 全入力項目全エラー取得

Follow me!

前の記事

CORS

次の記事

Vue Nuxt.js