Блог

Как добавить и удалить поле проверки в yup.validationSchema

 const validationSchema = yup.object().shape({
    password: yup
        .string()
        .label('Password')
        .required()
        .min(2, 'Seems a bit short...')
        .max(10, 'We prefer insecure system, try a shorter password.'),
    });
  

для добавления проверки вы можете использовать concat, ознакомьтесь с документацией здесь:

https://github.com/jquense/yup#mixedconcatschema-schema-schema

Вы можете определить свою базовую проверку и добавить дополнительные проверки позже. Будьте осторожны, что вы просто объединяете один и тот же тип.

Пример:

 const requiredSchema = Yup.string().required();
const min2Schema     = Yup.string().min(2, 'Seems a bit short...');
const passwordSchema = Yup.string()
                 .label('Password')
                 .max(10, 'We prefer insecure system, try a shorter password.')
                 .concat(requiredSchema)
                 .concat(min2Schema);
  

Все эти схемы являются схемами .string().
Вы можете просто объединить объект с объектами, строку со строками, число с числами и т.д.

Для выполнения условных проверок вы можете просто добавить встроенное условие:

 let isRequired = true;

const nameAndPasswordSchemaObject = Yup.object().shape({
    name: nameSchema.concat( isRequired ? requiredSchema : null ),
    password: passwordSchema,
});
  

То же самое касается yup-объектов:

 const emailSchemaObject = Yup.object({
   email: Yup.string().concat(requiredSchema)
});

const validationSchema = nameAndPasswordSchemaObject.concat(emailSchemaObject);
  

Я надеюсь, что это поможет.

Об удалении схем я ничего не мог видеть в документации (но это никогда не было нужно)

Для тех, кто ищет другой подход, например, зависящий от значения внутри самой схемы

 import * as yup from 'yup';

export const Schema = yup
  .object()
  .shape({
    name: yup.string().lowercase().required(),
    phone: yup.number().default(0).required(),
  })
  .when((values, schema) => {
    if (values.name === 'john') {
      return schema.shape({
        isHungry: yup.boolean().required(),
        food: yup.string().default('Pizza'),
      });
    }
  });