使用 Yup 验证多个输入字段答案

【问题标题】：Validating multiple inputs field with Yup使用 Yup 验证多个输入字段
【发布时间】：2019-01-06 10:30:39
【问题描述】：

我目前正在使用 Formik 并使用 Yup 进行验证。

我希望验证 2 个日期、一个开始日期和一个结束日期。

起初这很简单，我有两个输入字段，start_date 和 end_date。这两个都只是接受以下格式的文本输入，MM-YYYY。验证已经足够好了，它首先将该字符串转换为日期，使用moment(value, "MM-YYYY")。

由此，我们进行了以下测试：

start_date: Yup.string()
.test(
    'test1',
    'Format must be MM-YYYY',
    function (value){
        return moment(value, "MM-YYYY", true).isValid()
    }
)
.test(
    'test2',
    'Start date must be before end date',
    function(value){
        let { end_date } = this.parent;
        return moment(value, "MM-YYYY").isBefore(moment(end_date, "MM-YYYY"))
    }
)

test1 只是检查MM-YYYY 是一个有效的日期。 test2 检查start_date 是否在end_date 之前。为简单起见，end_date 测试是相同的，除了有任何额外的测试。额外测试检查end_date 是否等于或小于当前日期。

这是我目前拥有的，但我想要的是 4 个输入框：

start_date_month (01, 02, 03...)
start_date_year (2000, 2001...)
end_date_month
end_date_year

这很容易做到，但是测试会有点不同，我不确定我们是否可以同时测试start_date_month 和start_date_year。本质上，我需要将它们与- 连接起来以再次创建MM-YYYY。

任何想法如何用 Yup 做到这一点？

【问题讨论】：

标签： javascript reactjs formik yup

【解决方案1】：

非常短暂的问题。看来您可以在start_date_month 测试中传递其他输入，例如：let {start_date_year} = this.parent。

【讨论】：