1. 程式人生 > >redux-form V.7.4.2學習筆記(六)表單同步校驗技術

redux-form V.7.4.2學習筆記(六)表單同步校驗技術

組成 單獨 將在 error 應用 種類型 fine ror 客戶

一、簡介

redux-form V.7.4.2提供了兩種方法可以為表單提供同步客戶端校驗支持。

第一種是為整個redux-form提供校驗函數,該函數接受一個以表單中所有值組成的對象作為參數並返回一個帶有所有錯誤信息的對象。具體實現方式也分為兩種形式:或者是通過將校驗函數作為配置參數提供給經過裝飾的表單組件來完成的;或者作為props提供給經過裝飾的表單組件來完成的。

第二種是為每個字段使用單獨的驗證器。後面文章中我們也會討論字段級表單驗證的示例。

此外,您可以為redux-form提供具有與驗證函數相同類型簽名的警告函數。警告是不將表單標記為無效的錯誤,允許兩層嚴重性的錯誤。

示例驗證功能純粹是為了簡化演示值。在您的應用程序中,您將需要構建某種類型的可重用驗證器系統。

註意用於渲染每個字段的重用無狀態函數組件。重要的是,這不是內聯定義的(在render()函數中),因為它將在每個渲染上重新創建並觸發該字段的重新渲染,因為組件prop將發生變化。

重要信息:如果驗證函數返回錯誤,並且表單當前沒有呈現所有錯誤的字段,則表單將被視為有效並將被提交。

重要信息:對表單數據的每次更改都會進行同步驗證,因此,如果您的字段值無效,則field.error值將始終存在。您可能只想在觸摸字段後顯示驗證錯誤,這是在您的字段上發生onBlur事件時由redux-form為您設置的標記。提交表單時,所有字段都標記為已觸摸,允許顯示任何驗證錯誤。

重要信息:在驗證函數中,值可能未定義,因此在驗證嵌套字段時請註意。如果沒有,您可能會遇到一些TypeError:undefined不是對象。

本文將簡要討論redux-form支持下的同步表單校驗支持,包括了錯誤和警告型配置。官方Demo中只演示了輸入框的驗證,而這裏準備了包括 radio selecttextarea 的驗證方式。

參考

(1)https://github.com/tedyuen/react-redux-form-v6-example#snycValidation
(2)https://redux-form.com/7.4.2/examples/syncvalidation/

(暫時保存,稍後待續......)

redux-form V.7.4.2學習筆記(六)表單同步校驗技術