是的，基于非字段值的条件验证

Question

我正在尝试创建一个 yup 模式，其中模式根据变量值略有变化。就我而言，根据 prop 的值，myCondition我需要根据需要创建一个字段。我想知道是否有更好的方法可以使用 Yup 实现相同的目的。这是我当前有效的代码结构：

// config.js
const COMMON_SCHEMA = {
  str1: yup
    .string()
    .nullable()
    .required('Please input str1'),
  str3: yup
    .string()
    .nullable()
};
const VALIDATION_SCHEMA_1 = yup.object().shape({
  ...COMMON_SCHEMA,
  str2: yup.string().nullable(),
});

const VALIDATION_SCHEMA_2 = yup.object().shape({
  ...COMMON_SCHEMA,
  str2: yup
    .string()
    .nullable()
    .required('Please input str2'),
});

const SCHEMAS = {
  VALIDATION_SCHEMA_1,
  VALIDATION_SCHEMA_2
}
export default SCHEMAS;

以下是我有条件地选择不同模式的方法：

// app.js
import SCHEMAS from './config';
...

<Formik
  validationSchema={
    this.props.myCondition === true
      ? SCHEMAS.VALIDATION_SCHEMA_1
      : SCHEMAS.VALIDATION_SCHEMA_2
  }
>
...
</Formik>

我觉得我可以用更简单的方式实现上面所做的任何事情yup。我尝试的方法之一是将 prop 传递myCondition到配置文件中，并通过 using 来处理它的值yup.when()，但when只有当您要使用的值也是表单的一部分时才有效，所以我无法实现相同的目的。

Answer 1

这可以通过以下方式实现：

您可以将架构包装在函数中并传递条件属性：

const wrapperSchema = (condition) => 
  Yup.object().shape({
    ...COMMON_SCHEMA,
    str2: yup.string()
     .when([], {
       is: () => condition === true,
       then: yup.string().nullable(),
       otherwise: yup.string().required('Please input str2'),
     }),
  });

请注意，when 的第一个参数是必需的参数，您还可以传递例如["title", "name"]其中 title 和 name 可以是您的字段值，并且您可以在is回调中以相同的顺序检索和使用它们（如果需要）。