Nuxt3でvalidationする方法

Nuxt3でvalidationする方法

インストール

npm i vee-validate @vee-validate/i18n @vee-validate/rules

vee-validate -> veeValidate

@vee-validate/i18n -> バリデーションエラーメッセージに日本語化

@vee-validate/rules -> バリデーションルールを利用する

pluginの設定

■ plugins/vee-validate.client.ts

import { localize, setLocale } from "@vee-validate/i18n";
// VeeValidateで用意されている英語語版入力チェックエラーメッセージを使う
import en from "@vee-validate/i18n/dist/locale/en.json";
// VeeValidateで用意されている日本語版入力チェックエラーメッセージを使う
import ja from "@vee-validate/i18n/dist/locale/ja.json";
import AllRules from "@vee-validate/rules";
import { defineRule, configure } from "vee-validate";
import { defineNuxtPlugin } from "#app";

export default defineNuxtPlugin((_nuxtApp) => {
  configure({
    generateMessage: localize({
      en,
      ja
    }),
  });

 
  configure({
    generateMessage: localize('ja', {
      names: {
        password: 'パスワード',
        email: 'Email'
      },
    }),
  });


  Object.keys(AllRules).forEach((rule) => {
    defineRule(rule, AllRules[rule]); // 全ルールを使えるようにする
  });

  setLocale("ja");
});

Fieldのバリデーション

<template>
  <div class="min-h-screen flex flex-col">
    <div
      class="container max-w-md mx-auto flex-1 flex flex-col items-center justify-center px-2"
    >
      <div class="bg-white px-6 py-8 text-black w-full">
        <h1 class="mb-8 text-3xl text-center">
          新規登録 🎉
        </h1>
        <input
          v-model="email"
          type="text"
          class="block border border-grey-light w-full p-3 rounded mb-4"
          name="email"
          placeholder="Email"
        >

        <input
          v-model="password"
          type="password"
          class="block border border-grey-light w-full p-3 rounded mb-4"
          name="password"
          placeholder="Password"
        >

        <input
          v-model="passwordConfirm"
          type="password"
          class="block border border-grey-light w-full p-3 rounded mb-4"
          name="passwordConfirm"
          placeholder="Confirm Password"
        >

        <button
          type="submit"
          :class="validInput ? 'bg-indigo-500 hover:bg-indigo-700' : 'bg-gray-500'"
          class="block border border-grey-light w-full p-3 rounded mb-4 text-white"
          :disabled="!validInput"
          @click="register"
        >
          登録
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { useField } from 'vee-validate';

export default {
  setup() {
    const { value: email, errorMessage: emailError } = useField(
      "email",
      "required|email",
    );

    const { value: password, errorMessage: passwordError } = useField(
      "password",
      "required|min:5",
    );

    const { value: passwordConfirm, errorMessage: passwordConfirmError } = useField('passwordConfirm', (passwordConfirm) => {
      if ( passwordConfirm === password.value) {
        return true;
      }
      return 'パスワードと一致してません';
    });


    return {
      email,
      emailError,
      password,
      passwordError,
      passwordConfirm,
      passwordConfirmError
    }
  },
}
</script>

参考リンク

Nuxt3でvee-validate4（Composable API）を使う | デバッグライフ

Vue3でフォームバリデーションのVee-Validate4の基礎を理解 | アールエフェクト