需要设置 yup 验证，这不是必需的并且仅适用于一种情况

Question

我在日期选择器中添加了 yup 验证，所以如果我点击提交，现在会发生什么，它说需要字段 无效日期！ 但我的任务需要设置验证，例如仅当日期大于我在 max 中添加的今天日期并且它未添加到任何 .required("Required!") 事物中时才会生成错误，但不确定为什么会这样按要求工作！我不需要设置为必填的字段！

const today = moment().format("YYYY-MM-DD");
const validationSchema = yup.object().shape({
  date_of_birth: yup
    .date()
    .max(today, "DOB cannot be greater than today's date")
    .typeError("Invalid Date!")
});

export default function MaterialUIPickers() {
  const IndivisualForm = useFormik({
    initialValues: {
      date_of_birth: null
    },
    enableReinitialize: true,
    validationSchema,
    onSubmit: (values) => {
    }
  });
  const handleChangeDate = (date) => {
    IndivisualForm.setFieldValue(
      "date_of_birth",
      moment(date).format("YYYY-MM-DD")
    );
  };

  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <Grid container justifyContent="space-around">
        <KeyboardDatePicker
          disableToolbar
          variant="inline"
          format="MM/dd/yyyy"
          margin="normal"
          id="date-picker-inline"
          label="Date picker inline"
          value={IndivisualForm.values.date_of_birth}
          error={Boolean(IndivisualForm.errors.date_of_birth)}
          helperText={IndivisualForm.errors.date_of_birth}
          onChange={handleChangeDate}
          maxDate={today}
          KeyboardButtonProps={{
            "aria-label": "change date"
          }}
        />

        <Button
          color="primary"
          variant="contained"
          type="submit"
          onClick={IndivisualForm.handleSubmit}
        >
          Submit
        </Button>
      </Grid>
    </MuiPickersUtilsProvider>
  );
}

Code SandBox Link

Answer 1

不确定为什么 max 应该在这里工作？

理想情况下，当您想测试一些比较时。他们那里有 test 方法。所以基本上你需要这样做：

const validationSchema = yup.object().shape({
  date_of_birth: yup
    .date()
    .nullable()
    .notRequired()
    .test(
      "Is date greater",
      "DOB cannot be greater than today's date",
      (value) => {
        if (!value) return true;
        return moment(today).diff(value) > 0;
      }
    )
});

这是现场演示代码和框：https://codesandbox.io/s/material-demo-forked-kbxlz?file=/demo.js

或者直接看这里： https://kbxlz.csb.app/

需要设置 yup 验证，这不是必需的并且仅适用于一种情况

Need to set up yup validation which is not required and works on only one condition

javascript

reactjs

yup