Question

我正在用React，Formik和Yup创建一个带有日期验证的简单表单。

如下所示，只有两个字段：datePurchase和dateSale。我为两者都设置了min和max参数，并根据需要进行了设置：

<Formik
  initialValues={{
    datePurchase: '',
    dateSale: '',
  }}
  validationSchema={object()
    .shape({
      datePurchase: date()
        .min(new Date('01-01-2019'))
        .max(new Date())
        .required(),
      dateSale: date()
        .min(new Date('01-01-2019'))
        .max(new Date())
        .required(),
    })}
>
  {({
    values, handleChange, handleBlur,
  }) => (
      <Form>
        <input
          name="datePurchase"
          type="date"
          onChange={handleChange}
          onBlur={handleBlur}
          value={values.datePurchase}
        />
        <input
          name="dateSale"
          type="date"
          onChange={handleChange}
          onBlur={handleBlur}
          value={values.dateSale}
        />
      </Form>
    )}
</Formik>

然后，我意识到datePurchase必须早于dateSale。

如何使用validationSchema()和Yup来实现这种条件？那有可能吗？

我尝试对Yup文档中的when()和is:参数使用then:方法，但无济于事。

Answer 1

Yup.ref允许您引用其他兄弟姐妹-https://github.com/jquense/yup#yuprefpath-string-options--contextprefix-string--ref

尝试一下：

validationSchema={object()
    .shape({
      datePurchase: date()
        .min(Yup.ref('dateSale')
        .max(new Date())
        .required(),
      dateSale: date()
        .min(new Date('01-01-2019'))
        .max(new Date())
        .required(),
    })}

Formik中的日期验证：“购买日期”必须早于“销售日期”

1 个答案: