使用Yup驗證多個輸入字段

Question

我目前正在使用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做到這一點？

Answer 1

壽命很短的問題。 看來您可以只輸入其他輸入，例如：在start_date_month測試中， let {start_date_year} = this.parent 。