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传递到配置文件中，并通过使用yup.when()处理其值，但是when仅在您要使用的值也是表格的一部分，所以我无法达到同样的目的。

Answer 1

您可以直接在validationSchema中有条件地添加验证，如下所示：https://stackoverflow.com/a/56216753/8826314

编辑添加，您可以在初始表单中包含您的值，以便您可以对该字段进行 when 检查。例如：

<Formik 
  initialValues={
    ...,
    str2
  }
  validationSchema={
    ...,
    str2: yup.object().when('str2', {
      is: str2 => condition check that returns boolean,
      then: Yup.string().nullable(),
      otherwise: Yup.string().nullable().required('Please input str2')
    })
}
>
...
</Formik>

基于非字段值的Yup条件验证

1 个答案: