Zenn
🙌

【Web Library】Nextjs13で覚える便利なライブラリ【#１１Yup Validation】

2023/03/06に公開
Next.js
tech

【#１１Yup Validation】

YouTube: https://youtu.be/l4ZuzzYBmk0

https://youtu.be/l4ZuzzYBmk0

今回は「Yup」のバリデーションを設定していきます。

app/formik/hooks/page.tsx
'use client';
import { useFormik } from 'formik';
import * as Yup from 'yup';

const Page = () => {
  const formik = useFormik({
    initialValues: {
      email: '',
      password: '',
    },
    validationSchema: Yup.object({
      email: Yup.string().email('Invalid email address').required('Required'),
      password: Yup.string().min(8, 'パスワードは8文字以上を設定してください'),
    }),
    onSubmit: (values) => {
      alert(JSON.stringify(values, null, 2));
    },
  });

  return (
    <div className="text-white">
      <h1 className="mb-4 text-center text-3xl font-bold">
        Any place in your app!
      </h1>
    </div>
  );
};

export default Page;

バリデーションにつきましては、
Githubのドキュメントが参考になります。

https://github.com/jquense/yup

Discussion