redux-formV.7.4.2學習筆記（六）表單同步校驗技術-創(chuàng)新互聯(lián)

一、客戶端同步校驗支持

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

我們提供的服務有：成都網(wǎng)站建設、成都網(wǎng)站制作、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認證、江干ssl等。為數(shù)千家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務，是有科學管理、有技術的江干網(wǎng)站制作公司

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

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

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

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

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

幾個重要結論

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

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

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

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

官方示例分析

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

運行時快照

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

代碼分析

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

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 form
  validate,                // <--- validation function given to redux-form
 warn                     // <--- warning function given to redux-form
})(SyncValidationForm)

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

再補充一點的話，reduxForm函數(shù)中出現(xiàn)的validate和warn兩個參數(shù)，在官方API中已有明確功能說明，各自的英文說明如下（因為比較規(guī)則，在此不作翻譯）：
（1）關于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）關于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/

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

文章題目：redux-formV.7.4.2學習筆記（六）表單同步校驗技術-創(chuàng)新互聯(lián)
轉載來源：http://bm7419.com/article4/dichoe.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供服務器托管、品牌網(wǎng)站建設、移動網(wǎng)站建設、Google、關鍵詞優(yōu)化、App設計

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)