＊Vee-validate とは
Vue.jsのためのバリデーションライブラリです。v-validateディレクティブにバリデーションルールを指定して使います。（複数のルールを適用したい場合はパイプ
|で区切ります。）<input v-validate="'required|email'" name="email" type="text">
エラーを出力する場合はerrorsから取り出します。
<span>{{ errors.first('email') }}</span>
設定できるルールは最大文字数やEmail形式などがあります。
下記以外にもあるので、詳しくは公式ドキュメントを参考にしてください。
- alpha --> アルファベット
- alpha_dash --> アルファベットとアンダースコア
- alpha_num --> アルファベットと数値
- credit_card --> クレジット番号
- email --> Email番号
- max/min --> 最大文字数、最小文字数
＊参考
＊環境
- MacOS
- Vue 2.9.6
- vee-validate 2.1.0-beta.7
＊インストール
ターミナルで下記コマンドを実行します。$ npm install vee-validate --save
＊設定
VeeValidateをimportして使えるよう設定を追加します。<main.js>
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import { routes } from './routes'
import store from './store/store'
import { sync } from 'vuex-router-sync'
import VeeValidate, { Validator } from'vee-validate' <-- 追加
Vue.use(VueRouter)
const router = new VueRouter({
routes
})
sync(store, router)
Vue.use(VeeValidate) <-- 追加
new Vue({
el: '#app',
router,
store,
render: h => h(App)
})
＊バリデーションの実装
Emailアドレスの入力フォームを2つ作成し、別々のバリデーションを設定しました。- data-vv-scope
複数のformでバリデーションを別々にしたいとき、data-vv-scopeで名前を指定するとスコープを指定することができます。
<template>
<div>
<form @submit.prevent="validateForm('form-1')" data-vv-scope="form-1">
<div>
<label>Email1</label>
<p>
<input name="email" v-validate="'required|email'" :class="{'input': true, 'is-danger': errors.has('form-1.email') }" type="text" placeholder="Email">
<i v-show="errors.has('form-1.email')"></i>
<span v-show="errors.has('form-1.email')">{{ errors.first('form-1.email') }}</span>
</p>
</div>
</form>
<form @submit.prevent="validateForm('form-2')" data-vv-scope="form-2">
<div>
<label>Email2</label>
<p>
<input name="email" v-validate="'email|max:10'" :class="{'input': true, 'is-danger': errors.has('form-2.email') }" type="text" placeholder="Email">
<i v-show="errors.has('form-2.email')"></i>
<span v-show="errors.has('form-2.email')">{{ errors.first('form-2.email') }}</span>
</p>
</div>
</form>
</div>
</template>
<script>
export default {
methods: {
validateForm(scope) {
this.$validator.validateAll(scope).then((result) => {
if (result) {
alert('Form Submitted!')
}
})
}
}
}
</script>
Email1は、必須入力かつEmailアドレス形式でないとエラーになります。
Email2は、Emailアドレス形式かつ10文字以内でないとエラーになります。
＊所感
Emailアドレスやクレジットカードなど、正規表現でチェックするのは面倒なので、ライブラリがあるのは非常に便利でした。スコープを指定しなくても別々のフォームでチェックできる気がしたので、
data-vv-scopeの必要性については少し疑問が残っているので、実際に使うときはよく動作確認をしたいと思っています。Sign up here with your email
ConversionConversion EmoticonEmoticon