Vue.jsを使えば、リアルタイムでの入力チェックやエラー表示を備えたバリデーション機能を簡単に実装できます。本記事では、v-modelとcomputedを活用して、基本的な入力バリデーションを構築する方法を解説します。
バリデーション機能とは？
バリデーションとは、ユーザーがフォームに入力した値が正しいかどうかをチェックする処理です。例えば、「必須入力」「文字数制限」「メール形式チェック」などが一般的です。Vue.jsでは、v-modelとcomputed、あるいはwatchを組み合わせることで、リアクティブかつ柔軟なバリデーションが実現できます。
Vue.jsでのリアルタイムバリデーション実装例
ここでは、名前とメールアドレスを入力するフォームに対して、リアルタイムでエラーを表示する基本的な実装を紹介します。
<template>
<form @submit.prevent="handleSubmit">
<div>
<label>名前：</label>
<input v-model="name" type="text" />
<span v-if="nameError" class="error">{{ nameError }}</span>
</div>
<div>
<label>メールアドレス：</label>
<input v-model="email" type="email" />
<span v-if="emailError" class="error">{{ emailError }}</span>
</div>
<button type="submit" :disabled="hasError">送信</button>
</form>
</template>
<script setup>
import { ref, computed } from 'vue';
const name = ref('');
const email = ref('');
// エラーメッセージ（computedでリアルタイム検出）
const nameError = computed(() => {
if (name.value === '') return '名前は必須です。';
if (name.value.length < 2) return '2文字以上で入力してください。';
return '';
});
const emailError = computed(() => {
const pattern = /^[^@]+@[^@]+\.[^@]+$/;
if (email.value === '') return 'メールアドレスは必須です。';
if (!pattern.test(email.value)) return '正しいメール形式で入力してください。';
return '';
});
const hasError = computed(() => {
return nameError.value || emailError.value;
});
const handleSubmit = () => {
if (!hasError.value) {
alert('送信完了！');
// 実際の送信処理など
}
};
</script>
<style scoped>
.error {
color: red;
font-size: 0.9em;
margin-left: 0.5em;
}
input {
display: block;
margin-bottom: 0.5em;
}
button[disabled] {
background-color: #ccc;
cursor: not-allowed;
}
</style>
実装のポイント
- v-model： 入力値をリアクティブに管理
- computed： 入力に応じてリアルタイムでエラー文言を算出
- :disabled： 入力にエラーがあると送信ボタンを無効化
computedを使えば、テンプレートにエラーメッセージを直接記述せずにロジックを切り出せるため、コードの可読性が向上します。
応用のアイデア
- 複数項目をまとめてチェックするvalidate関数の導入
- vuelidateやvee-validateなど外部ライブラリを使った拡張
- 非同期バリデーション（例：メールアドレスの重複チェック）との組み合わせ
まとめ
Vue.jsでは、v-modelとcomputedを活用することで、フォームのリアルタイムバリデーションを簡潔に実装できます。ユーザーが迷わず正しく入力できるように、即時エラー表示を行うフォーム設計はユーザビリティ向上に直結します。基本を押さえたうえで、必要に応じてバリデーションロジックを拡張していきましょう。
