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

问题描述

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

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

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

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

例如，如果预设时间是早上 8 点。 用户无法将时间更改为 7:30 或 8:30

解决方法

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

这里 article 可以帮助您。

,

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!"),});

,

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

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

然后将 id 添加到 schema

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
            }
          )
        })
})