問題：點提交按鈕后執行validateFields()驗證成功，但不能執行if(!error){//驗證成功}內內容

分析及解決：

問題產生原因是： 使用了自定義驗證函數validator:valiPrice，它的每個分支必須執行callback()函數，否則將無法通過驗證
【1】此處必須進行回調函數調用，否則【2】處將無法通過驗證并執行

//表單提交驗證submit=()=>{this.props.form.validateFields((error,values)=>{ if(!error){//【2】 alert('成功') console.log(values)}else{alert('失敗')console.log(values)}})}//自定義驗證：商品價格大于0函數valiPrice=(rule, value, callback)=>{//console.log(value,typeof(value)) //在價格輸入-1即顯示是string類型if(value*1>0){ //字符串*1：將字符串轉化為數字類型callback() //【1】此處必須進行回調函數調用，否則將無法通過驗證}else{callback('價格必須大于0')}}<Item label='商品價格'>{//validator自定義驗證規則要求價格大于0getFieldDecorator('price',{initialValue:'',rules:[{required:true,message:'價格必須輸入'},{validator:this.valiPrice},]})(<Input type='number' placeholder='輸入商品價格' addonAfter="元" />)}</Item><Item ><Button type='primary' onClick={this.submit}>提交</Button> </Item>

其它寫法：直接把驗證函數寫在里面

【1】直接把驗證函數寫在內部，注意各情況必須回調

<Item label='商品價格'>{//validator自定義驗證規則要求價格大于0getFieldDecorator('price',{initialValue:'',rules:[{required:true,message:'價格必須輸入'},{validator:(rule,value,callback)=>{//【1】if(value*1>0){ //字符串*1：將字符串轉化為數字類型callback() //此處必須進行回調函數調用，否則將無法通過驗證}else{callback('價格必須大于0')}}},]})(<Input type='number' placeholder='輸入商品價格' addonAfter="元" />)} </Item>

總結

以上是生活随笔為你收集整理的andtd的validateFields()验证成功，但不能执行if(!error){}内内容的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。