在用到antd的Form組件的時候，可能會用到自定義的規(guī)則，以我的項目為例：在輸入名稱的時候需要請求接口，校驗的內(nèi)容是后臺返回的內(nèi)容，所以這個時候需要用到自定義的校驗規(guī)則

屏幕快照 2019-06-18 下午11.18.29.png

關(guān)于自定義校驗方法：antd官網(wǎng)提供了方法validator，如下：函數(shù)由3個參數(shù)組成，rule是規(guī)則，value是你輸入的值，callback是個回調(diào)函數(shù)

屏幕快照 2019-06-18 下午11.26.10.png

那么具體的寫法如下：將validator放在rules的數(shù)組中

{ getFieldDecorator(field, { rules:[{ required:required, message: requiredMsg, },{ validator: this.validateServiceName }], })( ) } ;

調(diào)用的方法如下：當value在變化的時候請求接口，通過接口返回的值傳給callback回調(diào)函數(shù)

//注意：在這里我只用到了value和callback，沒有自定義rule validateServiceName =(rule, value, callback)=>{ console.log(value) this.setState({ onlyName: value },()=>{ this.nameChange(callback) }) } //這塊是請求接口的方法： nameChange =(callback)=> { axios.get("/api/credit-serve/serve/checkServeName", {params:{serveName: this.state.onlyName} } ) .then(res=>{ if(res.data.responseCode === 0){ callback() //在這里也要寫個callback }else{ callback(res.data.responseMsg) } }) }

注意??：不管你callback返回不返回提示的內(nèi)容，都要寫callback這個函數(shù)，不返回內(nèi)容寫個空的callback()，如果不寫的話，在form表單中 用this.save.props.form.validateFields校驗是進不來if(!err)這個判斷中的

this.save.props.form.validateFields((err, values)=>{ if(!err){ //如果上面在請求成功后不寫callback()那么是進不來這個判斷中的 } })

具體可以參考GitHub上的這篇文檔：https://github.com/ant-design/ant-design/issues/5155

與50位技術(shù)專家面對面20年技術(shù)見證，附贈技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的antd form rules字数限制_【React】antd的form表单的自定义校验规则的用法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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