NEW ARTICLE
MySQLのエラー『Incorrect Key File for Table』の解決方法
  1. HOME
  2. Vue.js
  3. Vue.jsでのリアクティブフォームの作成とバリデーションの実装方法

Vue.jsでのリアクティブフォームの作成とバリデーションの実装方法

Vue.jsでのリアクティブフォームの作成とバリデーションの実装方法

Vue.jsを使用してリアクティブフォームを構築し、バリデーションを適切に実装することで、ユーザー入力の整合性を確保し、使いやすいUIを提供できます。

目次

リアクティブフォームとは

リアクティブフォームは、データとUIが双方向に同期され、リアルタイムで状態が反映されるフォームのことです。

基本的なフォーム構築

Vue.jsでシンプルなフォームを作成します。

<template>
  <form @submit.prevent="submitForm">
    <input v-model="formData.name" placeholder="名前">
    <button type="submit">送信</button>
  </form>
</template>

<script setup>
import { reactive } from 'vue';

const formData = reactive({
  name: ''
});

function submitForm() {
  console.log(formData.name);
}
</script>

v-modelを使用した双方向データバインディング

v-modelを使ってフォーム要素とデータをバインディングします。

<input v-model="formData.email" placeholder="メールアドレス">

リアクティブなバリデーション

リアルタイムで入力データを検証します。

const isValidEmail = computed(() => {
  return /\S+@\S+\.\S+/.test(formData.email);
});

エラーメッセージの表示

バリデーションエラー時にメッセージを表示します。

<p v-if="!isValidEmail">正しいメールアドレスを入力してください</p>

外部ライブラリを使用したバリデーション

VeeValidateやYupを活用して高度なバリデーションを行います。

npm install vee-validate yup

VeeValidateを使用したフォームバリデーション

VeeValidateでフォーム入力のバリデーションを行います。

import { useForm } from 'vee-validate';
import * as yup from 'yup';

const { handleSubmit, defineField } = useForm({
  validationSchema: yup.object({
    name: yup.string().required(),
    email: yup.string().email().required()
  })
});

const [name, nameAttrs] = defineField('name');
const [email, emailAttrs] = defineField('email');

カスタムバリデーションルール

独自のバリデーションルールを定義します。

const isStrongPassword = (value) => {
  return value.length >= 8;
};

フォーム送信時のバリデーション

送信時に全体のフォームを検証します。

function submitForm() {
  if (!isValidEmail.value) {
    alert('正しいメールアドレスを入力してください');
  } else {
    console.log('フォーム送信');
  }
}

エラースタイルの適用

バリデーションエラー時にスタイルを適用します。

<input v-model="formData.email" :class="{'error': !isValidEmail}">
<style>
.error {
  border-color: red;
}
</style>

リアルタイムフィードバック

入力中にエラーメッセージやバリデーションをリアルタイムで反映します。

watch(() => formData.email, (newVal) => {
  console.log('メールアドレス変更:', newVal);
});

動的フォームの追加

複数のフォーム要素を動的に追加します。

<form>
  <div v-for="(field, index) in formData.fields" :key="index">
    <input v-model="field.value">
    <button @click="removeField(index)">削除</button>
  </div>
  <button @click="addField">追加</button>
</form>

<script setup>
const formData = reactive({
  fields: [{ value: '' }]
});

function addField() {
  formData.fields.push({ value: '' });
}

function removeField(index) {
  formData.fields.splice(index, 1);
}
</script>

フォームの状態管理

フォームの状態（正常、エラー、未入力）を管理します。

const formState = reactive({
  isSubmitting: false,
  isSuccess: false,
  errors: []
});

非同期バリデーション

サーバー側でデータを検証します。

async function checkUsernameAvailability(username) {
  const response = await fetch(`/api/check-username?username=${username}`);
  const data = await response.json();
  return data.available;
}

まとめ

リアクティブフォームとバリデーションの組み合わせにより、信頼性の高いフォームを構築できます。適切なバリデーションルールを設け、エラーメッセージやフィードバックをリアルタイムで提供することで、ユーザーエクスペリエンスを向上させることが可能です。