概要
vue.jsでSPAを作成する必要があったので、入力検証について調べた内容をまとめる。
ライブラリについて
いろいろライブラリがあるようですが、vee-validateが一番ドキュメントが多く、利用ユーザーも多いようなので、とりあえず使ってみたいと思います。
実装方法
各ライブラリは、CDNで読み込んでお手軽に作ってみる。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Validation</title>
</head>
<body>
<div id="app">
<h1>Vee-Validateのテスト</h1>
<div>
<label>タイトル</label>
<input type="text" name="title"
v-model="title"
data-vv-as="タイトル"
v-validate="'required|max:10'"
/>
<div v-show="errors.has('title')">
<p>{{ errors.first('title') }}</p>
</div>
</div>
<button type="button" v-on:click="submit">作成する</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13"></script>
<script src="https://cdn.jsdelivr.net/npm/vee-validate@2.1.0-beta.9/dist/vee-validate.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vee-validate@2.1.0-beta.9/dist/locale/ja.js"></script>
<script>
// 日本語を設定する
VeeValidate.Validator.localize('ja');
Vue.use(VeeValidate);
new Vue({
el: '#app',
// データ
data: {
title: null,
},
// created() { this.$validator.localize('ja'); },
// watch: { $route () { this.$validator.localize('ja'); }},
methods: {
submit: function () {
// バリデートの判定
this.$validator.validateAll().then((result) => {
if (result === false) {
// エラー時の処理
alert('Validate NG.');
return false;
}
//エラーがなかった時の処理を下に記述
alert('Submit OK.')
});
}
}
});
</script>
</body>
</html>
実行結果
日本語にも対応できていていい感じですね。
エディタとブラウザだけで、構築できるのでお手軽です♪。
追記
npmでインストールしてcomponentで利用した場合は、
以下のようにして設定しないと日本語になりませんでしたので追記。
<template>
<div>
<input name="title" v-model="title" v-validate="'required'">
<div v-show="errors.has('title')">
<p>{{ errors.first('title') }}</p>
</div>
</div>
</template>
<script>
import VeeValidate from'vee-validate'
import ja from 'vee-validate/dist/locale/ja'
// メッセージを日本語に設定する
VeeValidate.Validator.localize('ja', ja);
Vue.use(VeeValidate);
export default {