VeeValidateによるフォームバリデーションの実装

NuxtプロジェクトにVeeValidateを導入し、フォームバリデーションを実装する手順を紹介します。

Transcript

1. VeeValidateによる フォームバリデーションの実装 @YRyu
2. ⽬次 1. はじめに 2. 開発環境 3. フォーム作成 4. VeeValidate導⼊ 5. バリデーション実装 6. 送信時のボタン制御 7. エラー箇所へスクロール 8. おわりに 2
3. はじめに VeeValidateとは... フォーム実装に必要な機能を兼ね備えたVue向けのモジュール - Form state and value tracking - UX - Synchronous and Asynchronous Validation - Handling submissions 3
4. 開発環境 node : 18.18.2 npm : 8.19.3 nuxt : 3.11.2 vee-validate : 4.12.6 yup : 1.4.0 ✓ VeeValidateはv3からv4へのメジャーアップデートで⼤きく仕様が変更されました ✓ Yupはバリデーションスキーマを定義するJSモジュールです 4
5. フォーム作成 Nuxtを⽤いてプロジェクトを作成し、基本的なログイン機能の実装を⾏う 5 interface LoginBody { email: string password: string } export default defineEventHandler(async (event) => { const body = await readBody<LoginBody>(event) if (body.email === 'vee-validate@test.com' && body.password === 'password') { return '認証に成功しました。 ' } else { throw createError('認証に失敗しました。 ') } }) /server/api/login.post.ts
6. Nuxtを⽤いてプロジェクトを作成し、基本的なログイン機能の実装を⾏う フォーム作成 <template> <h1>ログインページ </h1> <form @submit.prevent="submit()"> <input v-model="formData.email" type="email" name="email" placeholder="メールアドレス " /> <input v-model="formData.password" type="password" name="password" placeholder="パスワード" /> <button>ログイン</button> <span v-if="errorMessage">{{ errorMessage }}</span> </form> </template> 6 /pages/login.vue <script setup lang="ts"> const formData = ref({ email: '', password: '' }) const errorMessage = ref('') const submit = async () => { const { error } = await useFetch('/api/login', { method: 'POST', body: formData.value }) if (error.value) { errorMessage.value = error.value.data.message || '予期せぬエラーが発生しました。 ' } else { errorMessage.value = '' navigateTo('/') } } </script>
7. 1. VeeValidateとYupのインストールを⾏う > npm i vee-validate yup VeeValidate導⼊ 7
8. 2. VeeValidateのComposition APIを使って、作成したフォームを書き換える VeeValidate導⼊ 8 + const submit = handleSubmit( + async (values) => { + const { error } = await useFetch('/api/login', { + method: 'POST', + body: values + }) + if (error.value) { + errorMessage.value = error.value.data.message + || '予期せぬエラーが発生しました。 ' + } else { + errorMessage.value = '' + navigateTo('/') + } + } + ) </script> /pages/login.vue <script setup lang="ts"> + import { useForm, useField } from 'vee-validate' - const formData = ref({ email: '', password: '' }) + const { handleSubmit } = useForm() + const { value: email } = useField('email') + const { value: password } = useField('password') const errorMessage = ref('') - const submit = async () => { - const { error } = await useFetch('/api/login', { - method: 'POST', - body: formData.value - }) - if (error.value) { - errorMessage.value = error.value.data.message - || '予期せぬエラーが発生しました。 ' - } else { - errorMessage.value = '' - navigateTo('/') - } - }
9. 2. VeeValidateのComposition APIを使って、作成したフォームを書き換える VeeValidate導⼊ <template> <h1>ログインページ </h1> <form @submit.prevent="submit()"> - <input v-model="formData.email" type="email" name="email" placeholder="メールアドレス " /> + <input v-model="email" type="email" name="email" placeholder="メールアドレス " /> - <input v-model="formData.password" type="password" name="password" placeholder="パスワード" /> + <input v-model="password" type="password" name="password" placeholder="パスワード" /> <button>ログイン</button> <span v-if="errorMessage">{{ errorMessage }}</span> </form> </template> 9 /pages/login.vue
10. バリデーション実装 Yupのバリデーションスキーマを使って、フォームにバリデーションを追加する 10 <script setup lang="ts"> import { useForm, useField } from 'vee-validate' + import { string } from 'yup' - const { handleSubmit } = useForm() + const { handleSubmit } = useForm({ + validationSchema: { + email: string().email().required(), + password: string().min(8).max(16).required() + } + }) - const { value: email } = useField('email') + const { value: email, errorMessage: emailError } = useField('email') - const { value: password } = useField('password') + const { value: password, errorMessage: passwordError } = useField('password') const errorMessage = ref('') const submit = handleSubmit( async (values) => { const { error } = await useFetch('/api/login', { method: 'POST', body: values }) if (error.value) { errorMessage.value = error.value.data.message || '予期せぬエラーが発生しました。 ' } else { errorMessage.value = '' navigateTo('/') } - } + }, + () => { + errorMessage.value = '入力内容に誤りがあります。 ' + } ) </script> /pages/login.vue
11. バリデーション実装 Yupのバリデーションスキーマを使って、フォームにバリデーションを追加する 11 <template> <h1>ログインページ </h1> <form @submit.prevent="submit()"> <input v-model="email" type="email" name="email" placeholder="メールアドレス " /> + <span v-if="emailError">{{ emailError }}</span> <input v-model="password" type="password" name="password" placeholder="パスワード" /> + <span v-if="passwordError">{{ passwordError }}</span> <button>ログイン</button> <span v-if="errorMessage">{{ errorMessage }}</span> </form> </template> /pages/login.vue
12. フォーム送信時にボタンの制御を⾏う 送信時のボタン制御 12 <script setup lang="ts"> import { useForm, useField } from 'vee-validate' import { string } from 'yup' - const { handleSubmit } = useForm({ + const { handleSubmit, isSubmitting } = useForm({ validationSchema: { email: string().email().required(), password: string().min(8).max(16).required() } }) const { value: email, errorMessage: emailError } = useField('email') const { value: password, errorMessage: passwordError } = useField('password') const errorMessage = ref('') const submit = handleSubmit( /* 省略 */ ) </script> <template> <h1>ログインページ </h1> <form @submit.prevent="submit()"> <input v-model="email" type="email" name="email" placeholder="メールアドレス " /> <span v-if="emailError">{{ emailError }}</span> <input v-model="password" type="password" name="password" placeholder="パスワード" /> <span v-if="passwordError">{{ passwordError }}</span> - <button>ログイン</button> + <button :disabled="isSubmitting"> + {{ isSubmitting ? 'ログイン中...' : 'ログイン' }} + </button> <span v-if="errorMessage">{{ errorMessage }}</span> </form> </template> /pages/login.vue
13. エラー箇所へスクロール 検知したバリデーションエラーの発⽣箇所へスクロールさせる 13 <script setup lang="ts"> import { useForm, useField } from 'vee-validate' import { string } from 'yup' const { handleSubmit, isSubmitting } = useForm({ validationSchema: { email: string().email().required(), password: string().min(8).max(16).required() } }) const { value: email, errorMessage: emailError } = useField('email') const { value: password, errorMessage: passwordError } = useField('password') const errorMessage = ref('') const submit = handleSubmit( async (values) => { /* 省略 */ }, - () => { + ({ errors }) => { errorMessage.value = '入力内容に誤りがあります。 ' + document.querySelector( + `input[name="${Object.keys(errors)[0]}"]` + )?.scrollIntoView({ + behavior: 'smooth' + }) } ) </script> /pages/login.vue
14. おわりに VeeValidateを⽤いることで、以下の機能を簡単に実装することができた - バリデーションの実装 - エラーメッセージの表⽰ - 送信ボタンの制御 - エラー箇所へのスクロール また、Composition APIを使った実装により、カスタムコンポーネントへの拡張 性も⾮常に⾼いと感じた 14
15. 参考 [1] https://nuxt.com/docs/getting-started/introduction [2] https://vee-validate.logaretm.com/v4/guide/overview/ [3] https://github.com/jquense/yup 15