一、客戶端同步校驗支持

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

第一種是為整個redux-form提供校驗函數(shù)，該函數(shù)接受一個以表單中所有值組成的對象作為參數(shù)并返回一個帶有所有錯誤信息的對象。具體實現(xiàn)方式也分為兩種形式：（1）通過將校驗函數(shù)作為配置參數(shù)提供給經(jīng)過裝飾的表單組件來完成的；（2）作為props提供給經(jīng)過裝飾的表單組件來完成的。這也是本文要討論的校驗方案。

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

此外，還可以為redux-form提供具有與校驗函數(shù)相同類型簽名的警告函數(shù)。警告方式并不是將表單標記為無效的，這在某種意義上允許兩種層次嚴重錯誤的發(fā)生（這個結(jié)論只有通過深入分析有關(guān)源碼才能徹底弄明白，由于時間原因我也沒有分析這部分源碼，所以在此先略去進一步討論）。

另外需要提示的是，這里提供的示例校驗函數(shù)純粹是為了簡化演示目的。在實際的應用程序中，建議構(gòu)建某種類型的可重用校驗系統(tǒng)。

【注意】通常使用可重用的無狀態(tài)函數(shù)組件來渲染每個字段。重要的是，這不是使用內(nèi)聯(lián)方式定義的（在render函數(shù)中），因為在每次渲染時以及觸發(fā)每一個字段的重新渲染時都要進行校驗——因為此時組件prop將發(fā)生變化。

幾個重要結(jié)論

（1）如果校驗函數(shù)返回錯誤，并且表單當前由于發(fā)生各種錯誤而沒有渲染字段，則表單將被視為有效的并會被提交。

（2）表單數(shù)據(jù)每次更改時都會進行同步校驗；因此，如果你的字段值無效，則將始終存在一個field.error值。一旦你的字段被修改了，你可能只想顯示校驗錯誤——這種情況下當你的字段上發(fā)生onBlur事件時redux-form會為設置一個專門的標記。最終，當提交表單時，所有字段都標記為已觸摸（也就是已修改，一些特殊情況下，例如系統(tǒng)已經(jīng)內(nèi)置提供了某種數(shù)據(jù)，如果你點擊一下對應字段，說明「已觸摸」，這種情況也算是「已修改」的特殊情形），從而允許顯示任何校驗錯誤。

（3）在你的校驗函數(shù)中，值可能未定義，因此在驗證嵌套字段時請?zhí)貏e注意。如果沒有注意這個問題，那么你可能會遇到一些“TypeError：undefined”這樣的錯誤提示。

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

官方示例分析

官方示例的核心文件是redux-form-synchronous-validation.js，其中文件與絕大部分的其他實例保持一致，在此不作贅述。

運行時快照

注意到，上圖中在尚未點按提交按鈕的情況下，無論是輸入了不合格式要求的郵箱數(shù)據(jù)，還是輸入不在指定范圍內(nèi)的年齡數(shù)據(jù)，校驗子系統(tǒng)都給出相應的錯誤提示信息。從源碼跟蹤分析來看，redux-form這個庫的核心是一個不到900行代碼的名為createReduxForm.js的文件。上圖中錯誤信息都是由React.js系統(tǒng)完成的。也就是說，redux-form只提供校驗、錯誤、警告等數(shù)據(jù)部分（包括判斷函數(shù)）的抓取分析，最終的可能的錯誤提示是交由React系統(tǒng)（通過createElement方法）完成的。

代碼分析

在此，我們只關(guān)注與表單整體校驗有關(guān)的部分。下面還是先來看一下實例代碼（SyncValidationForm.js，僅直接相關(guān)部分）：

const validate = values => {const errors = {}if (!values.username) {errors.username = 'Required'} else if (values.username.length > 15) {errors.username = 'Must be 15 characters or less'}if (!values.email) {errors.email = 'Required'} else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {errors.email = 'Invalid email address'}if (!values.age) {errors.age = 'Required'} else if (isNaN(Number(values.age))) {errors.age = 'Must be a number'} else if (Number(values.age) < 18) {errors.age = 'Sorry, you must be at least 18 years old'}return errors }const warn = values => {const warnings = {}if (values.age < 19) {warnings.age = 'Hmm, you seem a bit young...'}return warnings }const SyncValidationForm = (props) => {//...... }export default reduxForm({form: 'syncValidation', // a unique identifier for this formvalidate, // <--- validation function given to redux-formwarn // <--- warning function given to redux-form })(SyncValidationForm)

其實，上面代碼中主要有兩句話：
（1）reduxForm函數(shù)中出現(xiàn)了validate和warn兩個參數(shù)（ES6對象屬性的簡潔表示方式），這兩個鍵值定義如上；
（2）上面定義了兩個相應于（1）中命名的函數(shù)，分別實現(xiàn)規(guī)則范圍內(nèi)數(shù)據(jù)的判定與可能的錯誤及警告信息的確定。

再補充一點的話，reduxForm函數(shù)中出現(xiàn)的validate和warn兩個參數(shù)，在官方API中已有明確功能說明，各自的英文說明如下（因為比較規(guī)則，在此不作翻譯）：
（1）關(guān)于validate函數(shù)
//validate : (values:Object, props:Object) => errors:Object [optional]
//a synchronous validation function that takes the form values and props passed
// into your component. If validation passes, it should return {}.
// If validation fails, it should return the validation errors in the form { field1: <String>, field2: <String> }.
// Defaults to (values, props) => ({}).

（2）關(guān)于warn函數(shù)
//warn : (values:Object, props:Object) => warnings:Object [optional]
//a synchronous warning function that takes the form values and props passed into your component.
// Warnings work the same as validations, but do not mark a form as invalid.
// If the warning check passes, it should return {}. If the check fails, it should return the
// warnings in the form { field1: <String>, field2: <String> }. Defaults to (values, props) => ({}).

可見，這兩個函數(shù)都返回一個簡單包含相應信息的對象。當然，在一切順利的情況下，其返回的對象應該是{}。至于這些信息的最終渲染是交由React系統(tǒng)實現(xiàn)的。

補充

參考資料（1）中tedyuen提供的基于官方示例的修改版本值得有興趣的朋友進一步試驗學習，畢竟官方示例只是提供了一種指導思想，實際的開發(fā)卻要求你必須去面對各種復雜的表單組件的校驗問題。

參考

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

總結(jié)

以上是生活随笔為你收集整理的redux-form V.7.4.2学习笔记（六）表单同步校验技术的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。