如何使用 yup 和 formik 验证表单？

Question

我有一个具有这样架构的表单。

validationSchema: Yup.object({
      date: Yup.string()
        .required("Required!"),
      time: Yup.string()
        .required("Required!")
})

我需要验证此表单是用于设置新日期还是更新现有日期。

如果表单用于更新现有日期，如果他们无法更改预设时间之前 30 分钟或之后 30 分钟的时间，我想通知用户。

例如，如果预设时间是上午 8 点。用户不能将时间更改为 7:30 或 8:30

Answer 1

这里必须使用yup.addMethod()函数docs link

这里article可以帮到你。

Answer 2

MomentJs 是处理日期的好工具。

您可以将测试 function 添加到验证链。

validationSchema: Yup.object({
    date: Yup.string().required("Required!"),
    time: string()
        .test(
            "time-range",
            "error message",
            (value) =>
                moment().diff(moment(value), "minutes") > 30 ||
                moment().diff(moment(value), "minutes") < 30
        )
        .required("Required!"),
});

Answer 3

我通过在表单中添加新的标识符来解决

const ComponentWithFormik = withFormik({
  validationSchema,
  mapPropsToValues: (props) => {
    return {
      id: props.id,
      date, 
      time
    }
  }
})

然后将 id 添加到架构

validationSchema: Yup.object({
      id: string(),
      date: Yup.string()
        .required("Required!"),
      time: Yup.string()
        .required("Required!")
})

从 id，我知道表单是用来设置新日期或更新现有日期的。

最后只用.when方法。我的代码看起来像这样。

validationSchema: Yup.object({
      date: Yup.string()
        .required("Required!"),
      time: Yup.string()
        .required("Required!")
        .when('id' => {
          id: id => id !== undefined,
          then: string().test(
            'time',
            'error message',
            function(value){  
              //put logic here
              //to access sibling value use this.parent
            }
          )
        })
})

如何使用 yup 和 formik 验证表单？

How to validate a form with yup and formik?

javascript

yup