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桁の数時か | |
| 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() | 全入力項目全エラー取得 |
