【Vue.js】バリデーションライブラリvee-validateの導入と使い方｜フォームの信頼性を高める

# vee-validate 本体、Yup との連携用アダプター、Yup
npm i vee-validate @vee-validate/yup yup

<script setup>
import { useForm } from 'vee-validate'

const { handleSubmit, errors, values } = useForm({ validationSchema: schema })

// NG①：values.name は、ref ではなく、ただの値（最初は undefined）。
//       v-model="name" は、const にバインドすることになり、動かない
const name = values.name

// NG②：handleSubmit(onSubmit) は、送信ハンドラとなる関数を「返す」だけで、呼ばない
// <form @submit="handleSubmit(onSubmit)">
</script>

<script setup>
import { useForm } from 'vee-validate'
import { toTypedSchema } from '@vee-validate/yup'
import * as yup from 'yup'

// toTypedSchema で包んで渡す（型が付き、必須項目の値が null 許容にならない）
// label は、エラーメッセージの ${path} に使われる項目名
const schema = toTypedSchema(
  yup.object({
    name: yup.string().label('名前').required(),
    email: yup.string().label('メールアドレス').required().email()
  })
)

const { handleSubmit, errors, defineField } = useForm({
  validationSchema: schema
})

// defineField は [値のモデル, 属性] を返す
const [name, nameAttrs] = defineField('name')
const [email, emailAttrs] = defineField('email')

// handleSubmit は、検証に通ったときだけコールバックを呼ぶ、送信ハンドラを返す
const onSubmit = handleSubmit((values) => {
  console.log('送信データ:', values)
})
</script>

<template>
  <!-- novalidate：ブラウザ標準の検証を止め、エラー表示を vee-validate に統一する -->
  <form novalidate @submit.prevent="onSubmit">
    <div>
      <label for="name">名前</label>
      <input
        id="name"
        v-model="name"
        v-bind="nameAttrs"
        type="text"
        autocomplete="name"
        :aria-invalid="!!errors.name"
        aria-describedby="name-error"
      >
      <p id="name-error" role="alert">{{ errors.name }}</p>
    </div>

    <div>
      <label for="email">メールアドレス</label>
      <input
        id="email"
        v-model="email"
        v-bind="emailAttrs"
        type="email"
        autocomplete="email"
        :aria-invalid="!!errors.email"
        aria-describedby="email-error"
      >
      <p id="email-error" role="alert">{{ errors.email }}</p>
    </div>

    <!-- 送信ボタンは無効にしない。押したときに、エラーを示す -->
    <button type="submit">送信</button>
  </form>
</template>

<script setup>
import { Form, Field, ErrorMessage } from 'vee-validate'
import { toTypedSchema } from '@vee-validate/yup'
import * as yup from 'yup'

const schema = toTypedSchema(
  yup.object({
    email: yup.string().label('メールアドレス').required().email(),
    password: yup.string().label('パスワード').required().min(8)
  })
)

// 検証に通ったときだけ、値が渡される
function onSubmit(values) {
  console.log('送信データ:', values)
}
</script>

<template>
  <Form :validation-schema="schema" @submit="onSubmit">
    <label for="email">メールアドレス</label>
    <Field id="email" name="email" type="email" />
    <ErrorMessage name="email" />

    <label for="password">パスワード</label>
    <Field id="password" name="password" type="password" />
    <ErrorMessage name="password" />

    <button type="submit">送信</button>
  </Form>
</template>

import { toTypedSchema } from '@vee-validate/zod'
import { z } from 'zod'

// Yup の代わりに Zod も使える（npm i @vee-validate/zod zod）
const schema = toTypedSchema(
  z.object({
    email: z.string().min(1, '必須です').email('正しいメール形式で入力してください')
  })
)

import * as yup from 'yup'

const schema = yup.object({
  password: yup
    .string()
    .label('パスワード')
    .required()
    .min(8)
    .matches(/[A-Z]/, '${path}に大文字を含めてください'),

  // パスワードの確認：password と同じ値でなければ、エラー
  passwordConfirm: yup
    .string()
    .label('確認用パスワード')
    .required()
    .oneOf([yup.ref('password')], 'パスワードが一致しません'),

  // 独自のルール：test(名前, メッセージ, 検証する関数)。真を返せば、OK
  username: yup
    .string()
    .label('ユーザー名')
    .test('no-spaces', '空白は使えません', (value) => !value || !/\s/.test(value))
})

// main.js など、アプリの起動時に、1度だけ設定する（スキーマを作る前に）
import { setLocale } from 'yup'

setLocale({
  mixed: {
    required: '${path}は必須です'
  },
  string: {
    min: '${path}は${min}文字以上で入力してください',
    email: '${path}の形式が正しくありません'
  }
})

// 項目名は、スキーマ側で .label('名前') と指定すると、${path} に入る