在用到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ù)組中

<FormItem label={label} {...formItemLayout} key={field}>
  {
      getFieldDecorator(field, {
           rules:[{
                   required:required,
                   message: requiredMsg,
                },{
                    validator: this.validateServiceName
                   }],
             })(
                    <Input  type="text" placeholder='test'   />
                 )
     }
   </FormItem>;

調(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