根据Yup和Formik中的另一个字段有条件地验证字段

时间:2020-10-04 12:49:58

标签: reactjs formik yup

我在验证时遇到问题。我希望如果access的值为1,那么您可以选择start_dateend_date,但是如果access的值不是1,那么您只能选择今天。 / p>

代码和框

Edit 63973773/error-when-setting-an-input-in-reactjs-label-is-over-overwrites-the-value-of (forked)

export const validationSchema = yup.object().shape({
  access: yup.number().nullable(),
  start_date: yup.string().required('Select start date'),
  end_date: yup.string().required('Select end date'),
});

1 个答案:

答案 0 :(得分:1)

您可以使用日期验证来代替字符串验证,只需确保设置正确的消息传递即可!:

import moment from "moment";
...
const today = new Date().toDateString();
const validationSchema = yup.object().shape({
  access: yup.number().nullable(),
  start_date: yup.date()
    .typeError("Invalid date")
    .required("Select start date")
    .when("access", {
      is: 1,
      otherwise: (d) => d.min(today, "Should be today's date")
          .max(today, "Should be today's date")
    }),
  end_date: yup.date()
    .typeError("Invalid date")
    .required("Select end date")
    .when("access", {
      is: 1,
      otherwise: (d) => d.min(today, "Should be today's date")
          .max(today, "Should be today's date")
    })
});

可以找到更新here