如何向 yup.validationSchema 添加和删除验证字段

Day*_*ght 4 reactjs yup formik

如何向 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.'),
    });
Run Code Online (Sandbox Code Playgroud)

小智 12

要添加验证,您可以使用 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);
Run Code Online (Sandbox Code Playgroud)

所有这些模式都是 .string() 模式。您可以将对象与对象、字符串与字符串、数字与数字等连接起来。

要进行条件验证,您只需添加一个内联条件:

let isRequired = true;

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

yup 对象也是如此:

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

const validationSchema = nameAndPasswordSchemaObject.concat(emailSchemaObject);
Run Code Online (Sandbox Code Playgroud)

我希望这有帮助。

关于删除模式我在文档中看不到任何内容(但从未需要它)


小智 6

对于寻找另一种方法的人,例如依赖于模式本身内部的值

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'),
      });
    }
  });
Run Code Online (Sandbox Code Playgroud)