【Vue.js】入力フォームのバリデーション機能を実装する方法|リアルタイムでエラー表示

【Vue.js】入力フォームのバリデーション機能を実装する方法|リアルタイムでエラー表示 Vue.js

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を活用することで、フォームのリアルタイムバリデーションを簡潔に実装できます。ユーザーが迷わず正しく入力できるように、即時エラー表示を行うフォーム設計はユーザビリティ向上に直結します。基本を押さえたうえで、必要に応じてバリデーションロジックを拡張していきましょう。