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

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

關(guān)于自定義校驗(yàn)方法：antd官網(wǎng)提供了方法validator，如下：函數(shù)由3個(gè)參數(shù)組成，rule是規(guī)則，value是你輸入的值，callback是個(gè)回調(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)用的方法如下：當(dāng)value在變化的時(shí)候請(qǐng)求接口，通過接口返回的值傳給callback回調(diào)函數(shù)

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

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

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

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

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

總結(jié)

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

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