از این پست برای ساخت یک فرم در react ( با کمک کتابخانه formik ) استفاده کنید.

برای form validation از کتابخانه yup استفاده می کنیم. با دستور زیر yup را نصب کنید:

npm i yup

بعد کتابخانه yup را ایمپورت کنید:

import * as Yup from 'yup';

در متد useFormik، از validationSchema  برای ساخت validation استفاده کنید:

const formik = useFormik({
    ...,
    validationSchema: Yup.object({
      name: Yup.string()
              .label('Full Name')
              .required("name is required!"),
      email: Yup.string()
              .email()
              .required("email is required!"),
      profession: Yup.string()
                  .oneOf(professions, 'The profession you chose does not exist'),
      age: Yup.number()
            .min(15, 'You need to be older than 15 to register')
            .required("age is required!")
    })
  })

توضیح:

هر آبجت در validationSchema تشکیل شده از نام هر فیلد به عنوان کلید (که در پراپرتی name مشخص کردیم) و قانون validation به عنوان مقدار

قانون های سفارشی برای validation

اگر می خواهید یک قانون کاملاً سفارشی برای فیلد ورودی تعریف کنید، می توانید از کد زیر الگو بگیرید (در اینجا ما بررسی می کنید که در فیلد اول، کاربر هم نام کوچک و هم فامیل خود را وارد کرده باشد)

const formik = useFormik({
    ...,
    validationSchema: Yup.object({
      name: Yup.string()
              .label('Full Name')
              .required()
              .test('is-full-name', 'Please enter both your first and last name', function (value) {
                const nameArr = value.split(" ");
                return nameArr.length >= 2;
              }),
      ...
    })
  })