Vuelidateはフォームの検証(validation)をするためのVueライブラリです。モデルにもとづいて、データをさまざまなプロパティで確かめられます。本稿はこのライブラリの基本的な使い方をご紹介します。
<input>要素にv-modelを定める
まずは、Vuelidateは使わずに、<input>要素にモデルを定めて、データバインディングしてみましょう。ここでは、Vue.jsおよぴVuelidateなどのライブラリはCDNから読み込みます。
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<body>要素に書くHTMLの要素とJavaScriptコードはつぎのとおりです。<input>要素をv-modelディレクティブでデータバインディングしました(「フォーム入力バインディング」参照)。入力したテキストはその下の<div>に示されます。v-modelに添えた.trimはテキストの前後の余分なスペースを除く修飾子です。
<div id="app">
<input v-model.trim="text">
<div>入力: {{text}}</div>
</div>
<script>
new Vue({
el: '#app',
data: {
text: ''
}
});
</script>
なお、つぎのような簡単なスタイルを与えます。
body {
font-family: Verdana, Geneva, "sans-serif";
}
input {
border: 1px solid silver;
border-radius: 4px;
background: white;
padding: 5px 10px;
font-size: 1.2em;
}
Vuelidateを設定する
つぎに、Vuelidateの基本的な設定を行いましょう。Vuelidateのライブラリは、つぎのようにふたつCDNから<script>要素に読み込みます。
<script src="https://cdn.jsdelivr.net/npm/vuelidate@0.7.4/dist/vuelidate.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuelidate@0.7.4/dist/validators.min.js"></script>
Vuelidateにより使えるようになるのは、つぎのふたつの機能です。
-
validationsコンポーネントオプション: Vueコンポーネントに検証の中身を定めます。 -
$vモデルオブジェクト: Vueのモデルと検証の状態をプロパティとしてもつモデルのオブジェクトです。
validationsオプションプロパティはVueインスタンスのオプションオブジェクトに加えて、検証するデータに対して何を確かめるのかオブジェクトで定めます。プロパティが検証するデータ、値はバリデータ(検証の設定)を納めたオブジェクトです。Vue.use()メソッドでVuelidateを使い、用いるバリデータはvalidatorsから変数に取り出しておいてください。requiredは入力が必須ということです。
Vue.use(window.vuelidate.default);
const {required} = window.validators;
new Vue({
// [略]
data: {
// [略]
},
validations: {
text: {
required
}
}
});
$vモデルは検証の現在の状態をもつオブジェクトです(「$v values」参照)。状態を示すプロパティ一式を備え、validationsオプションに確かめる項目が定められます。v-modelディレクティブには$vモデルから検証するデータを得て、その$$modelブロパティを与えてください。
$vモデルは以下の<body>要素のようにテキストとして参照すると、備えるプロパティやその変化が確かめられてわかりやすいでしょう。たとえば、フィールドにひとたびテキストを入力すれば、$dirtyバリデータがtrueに変わります(図001)。
図001■入力により検証のプロパティの値が変わる
<div id="app">
<!-- <input v-model.trim="text"> -->
<input v-model.trim="$v.text.$model">
<div>入力: {{text}}</div>
<pre>{{$v}}</pre>
</div>
-
$model: 検証するもとのモデルへの参照。Vueモデルを直に参照したときと同じ値が得られます。つまり、this.$v.value.$modelとthis.valueは同じ値になるということです。この値を書き替えればモデルは更新され、$touchメソッドが自動的に呼び出されます。フィールドにはじめてフォーカスしたとき、$dirtyがtrueになります。
クラスをバインディングする
ひとたび入力したテキストフィールドはスタイルを変えましょう。このようなときに使うのが「HTML クラスのバインディング」です。<style>要素につぎのようなスタイルを加えます。
.dirty {
border-color: forestgreen;
background: mintcream;
}
そして、<input>要素にクラスをバインディングします。クラスを決めるのは、バリデータの値に応じて適用するクラスをオブジェクトで返す新たなメソッド(status())です(なお、:classはv-bind:classの省略記法です。)。
<input v-model.trim="$v.text.$model" :class="status($v.text)">
new Vue({
// [略]
validations: {
// [略]
},
methods: {
status(validation) {
return {
dirty: validation.$dirty
}
}
}
});
これで、ひとたび入力したテキストフィールドにはクラスがバインディングされて、スタイルは動的に変わります(図002)。
図002■入力したテキストフィールドのスタイルが変わる
必要な文字数を定める
さらに、テキストフィールドに入力しなければならない最低文字数も決めましょう。用いるバリデータはminLengthです(「Builtin validators」参照)。validationsオプションには最低文字数を引数にして定めてください。
const {required, minLength} = window.validators;
new Vue({
// [略]
validations: {
text: {
required,
minLength: minLength(3)
}
},
// [略]
});
入力した文字数が足りなければ、$errorバリデータがtrueになります。その値に応じて、クラスをバインディングすればよいでしょう(図003)。
.error {
border-color: red;
background: mistyrose;
}
図003■入力文字数が足りないと別のスタイルになる
つぎのコード001に、HTML要素とJavaScriptコード、およびCSSの定めをまとめます。併せて、サンプル001をCodePenに公開しました。
コード001■Vuelidateでテキスト入力に応じてフィールドのスタイルを変える
<div id="app">
<input v-model.trim="$v.text.$model" :class="status($v.text)">
<div>入力: {{text}}</div>
<pre>{{$v}}</pre>
</div>
Vue.use(window.vuelidate.default);
const {required, minLength} = window.validators;
new Vue({
el: '#app',
data: {
text: ''
},
validations: {
text: {
required,
minLength: minLength(3)
}
},
methods: {
status(validation) {
return {
dirty: validation.$dirty,
error: validation.$error
}
}
}
});
body {
font-family: Verdana, Geneva, "sans-serif";
}
input {
border: 1px solid silver;
border-radius: 4px;
background: white;
padding: 5px 10px;
font-size: 1.2em;
}
.dirty {
border-color: forestgreen;
background: mintcream;
}
.error {
border-color: red;
background: mistyrose;
}
サンプル001■Vue.js: Vuelidate basic
See the Pen Vue.js: Vuelidate basic by Fumio Nonaka (@FumioNonaka) on CodePen.