概要
入力検証の定義をJavaScript側にまとめられないか調べた内容をメモしておく。
実装方法
下記のやり方でうまくいったので、添付しておく。
<!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>
<div :class="{'is-error': errors.has('title') }">
<input
type="text"
name="title"
v-model="title"
v-validate="'required|max:20'"
data-vv-as="タイトル">
</div>
<!-- エラーの個別表示(タイトル) -->
<p v-show="errors.has('title')">{{ errors.first('title') }}</p>
</div>
<button type="button" @click="submit">作成する</button>
<!-- エラーの個別表示(お知らせ) -->
<div v-show="errors.has('notification')">{{ errors.first('notification') }}</div>
<!-- 全てのエラーをまとめて一箇所に表示する場合 -->
<div v-show="errors.any()">
<p v-for="error in errors.collect()">{{ error }}</p>
</div>
</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>
Vue.use(VeeValidate);
new Vue({
el: '#app',
// データ
data: {
title: null
},
created() {
// メッセージを日本語に設定する
this.$validator.localize('ja');
},
methods: {
submit: function () {
// お知らせメッセージを初期化
this.$validator.errors.remove('notification');
// バリデートの判定
this.$validator.validateAll().then((result) => {
if (result === false) {
// 入力エラー
this.$validator.errors.add({field: 'notification', msg: '入力エラーがあります...'});
return false;
}
// 何かしらの処理...
const is_success = (Math.random() > 0.3);
if (!is_success) {
// お知らせメッセージをセットする
this.$validator.errors.add({field: 'notification', msg: '処理に失敗しました...'});
return false;
}
//エラーがなかった時の処理を下に記述
alert('Submit OK.')
});
}
}
});
</script>
</body>
</html>
実行結果
作成ボタンを押すと、エラーメッセージが３つ表示されました。
まとめ
v-validate属性で各htmlタグに定義することもできるが、敢えてJavaScript側で定義できないかやってみた。
独自ルールなどを定義することもあると思うので、JS側にまとめて定義しておいた方がメンテが楽かな...