ちょい足しVue.jsでバリデーションフォームを実装する方法

こんにちは！このブログ記事では、Vue.jsを使用してバリデーションフォームを実装する方法についてご紹介します。

Vue.jsは、直感的なデータバインディングとコンポーネントベースのアーキテクチャを提供する人気のあるJavaScriptフレームワークです。

この記事では、静的なHTMLのフォームにちょっとした手を加えるだけで、簡単にバリデーション機能を追加する方法をご紹介します！！
いわゆるICSさんでいう*ちょい足しVue.jsですね🔥

さて本題のコードですが、以下になります。

index.html

        <form>
          <div class="mb-5">
            <label
              class="mb-3 block text-base font-medium text-[#07074D]"
              for="name"
              >名前</label
            >
            <input
              type="text"
              class="w-full rounded-md border border-[#e0e0e0] bg-white py-3 px-6 text-base font-medium text-[#6B7280] outline-none focus:border-[#6A64F1] focus:shadow-md"
              id="name"
              required
              v-model="name"
              @focus="nameValidationVisible = false"
              @blur="nameValidationVisible = !name"
            />
            <Transition name="fade">
              <div
                class="bg-red-400 text-white p-3 mt-3"
                v-show="!name && nameValidationVisible"
              >
                名前を入力してください
              </div>
            </Transition>
          </div>
          //~~~~~~省略
          <button
            type="button"
            class="disabled:bg-slate-300 hover:shadow-form rounded-md bg-[#6A64F1] py-3 px-8 text-base font-semibold text-white outline-none"
            @click="validateForm"
            :disabled="isButtonDisabled"
          >
            送信
          </button>
        </form>

main.js

import { createApp, ref, computed } from "https://unpkg.com/vue@3.2.4/dist/vue.esm-browser.prod.js";
const app = createApp({
  setup() {
    const name = ref("");
    const age = ref("");
    const email = ref("");
    const nameValidationVisible = ref(false);
    const ageValidationVisible = ref(false);
    const emailValidationVisible = ref(false);


    const validateForm = () => {
      if (!name.value) {
        nameValidationVisible.value = true;
        return;
      }
     // ~~~~~~省略
    };


    const isButtonDisabled = computed(() => {
      return !name.value; //~~~~~~省略
    });


    return {
      name,
      isButtonDisabled,
      validateForm,
      nameValidationVisible,
       //~~~~~~省略
    };
  },
});
app.mount("#app");

URL:https://contact-form-with-a-little-vue.netlify.app/

このように状態管理はVue.jsが比較的楽に行ってくれるので、Vanillaで実装するよりも工数が少なくて良いですね。
こういうバリデーションは実務で行うことは少ないんですが、静的サイトだったり自作が必要なケースも多々あるので積極的に使っていこうかなと思いました！

Vue.jsを使用すると、状態管理が比較的楽に行ってくれるので、バリデーションの実装がVanilla JavaScriptに比べて工数が少なくて良いですよね！

実務ではあまり行う機会は少ないかもしれませんが、静的なサイトや自作のプロジェクトでは、このようなバリデーションが必要になることもあるかと思いますので、ぜひ参考にしてみてください！

参考にさせていただいた記事
*ちょい足しVue.js （https://ics.media/entry/210908/)