一、客戶端同步校驗(yàn)支持

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

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

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

第二種是為每個(gè)字段使用單獨(dú)的校驗(yàn)器。后面文章中我們也會(huì)討論字段級表單驗(yàn)證的示例。

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

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

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

幾個(gè)重要結(jié)論

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

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

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

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

官方示例分析

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

運(yùn)行時(shí)快照

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

代碼分析

在此，我們只關(guān)注與表單整體校驗(yàn)有關(guān)的部分。下面還是先來看一下實(shí)例代碼（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 form
  validate,                // <--- validation function given to redux-form
 warn                     // <--- warning function given to redux-form
})(SyncValidationForm)

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

再補(bǔ)充一點(diǎn)的話，reduxForm函數(shù)中出現(xiàn)的validate和warn兩個(gè)參數(shù)，在官方API中已有明確功能說明，各自的英文說明如下（因?yàn)楸容^規(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) => ({}).

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

補(bǔ)充

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

參考

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

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

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

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

廣告

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