antd 的 表單校驗方法包括 validateFields 和 validateFieldsAndScroll

裡面可以接收校驗欄位陣列,options,和一個回撥函式

from.validateFields([name,age],{},(err,val)=> {})

校驗全部表單資料

from.validateFields((err,val)=> {}) // 無響應

發現無響應,無報錯,完全蒙逼了,排查良久,新增校驗欄位後發現可以成功校驗,於是想著大不了我全部手動新增欄位名校驗,終於,錯誤的原因浮現出來了

from.validateFields([name,val)=> {}) // 正常

只要校驗我自定義的一個表單元件,這個方法就會無響應,原因就是我自定義元件的自定義校驗出現了問題

也就是 validator 方法裡出現了問題 好好看看你的自定義校驗吧

rules: [
 {
 validator: (rule,value,callback) => {
 callback()
 },},],

補充知識：解決Antd自定義表單驗證問題

最近專案中遇到一個表單校驗的問題，看官方文件、網上搜索找了好久，終於找到了解決方案。

先闡述一下問題：

專案中的表單需要多圖片上傳，這個使用Upload元件就OK了，但是表單驗證就出現問題了：

1、首先，上傳圖片項是必須項，不能無圖片提交；

2、已上傳的圖片可以刪除；

3、後端要求提交的圖片為md5格式，通過上傳介面獲取圖片的md5值，這樣就不能直接使用表單提交時獲取的 value值，因 為它的值是本地路徑，所以我通過model中上傳圖片獲取md5的值存在model的state中 （這個問題是最棘手的）。

解決問題：

1、首先我自定義了一個表單驗證方法，因為需要以上傳成功的圖片為基準。

自定義表單校驗方法：

handleCheckImg = (rule,callback) =>　{
 if (value) {
 const { aware } = this.props;
 const { fileList } = aware;
 const newFileList=fileList.map(item => ({...item}));
 if (!newFileList) {
 callback('請上傳相關圖片');
 } else {
 newFileList.length ? callback() : callback('請上傳相關圖片');
 }
 }
 callback(); // callback方法必須要有，否則會報錯
};

在表單中呼叫：

<FormItem label="上傳圖片">
 {getFieldDecorator('attachment',{
 rules: [
 { required: true,message: '請上傳相關圖片' },{ validator: this.handleCheckImg },})(
 <div className="clearfix">
 <Upload {...uploadProps} >
 ......
 </Upload>
 </div>
 )}
</FormItem>

此時表單的驗證規則會呼叫到自定義的表單驗證方法，但是由於驗證方法預設是在表單onChange的時候呼叫，而預設onChange時進行表單驗證，在model中用於存放圖片md5值的變數還沒有進行更新這裡就已經進行驗證了，這樣的驗證會導致，即便我已經上傳了一張圖片，頁面上仍然會提示要我上傳相關圖片，刪除圖片卻不會呼叫到表單驗證。

那要怎麼解決？那就讓我點選按鈕準備submit時進行表單驗證吧。

2、通過看文件，表單的getFieldDecorator方法中有個屬性validateTrigger可以設定什麼時候進行表單驗證，預設是onChange。

於是我在方法中新增該屬性，設定為onSubmit：

getFieldDecorator('attachment',validateTrigger: 'onSubmit',// 設定進行表單驗證的時機為onSubmit
 initialValue: detail ? detail.imgList : null,})

這樣設定了以後雖然可以正常進行表單驗證了，但是，當點選了一次提交按鈕後，表單驗證過的表單項不會再進行驗證。那萬一我點選一次提交後，表單中其他表單項有問題，而圖片上傳沒有問題，那我將其他表單項都填好符合驗證格式後，刪除了圖片，再點選提交按鈕，表單不會再驗證圖片上傳的表單項，這樣就被通過了，不行呀，這是一個bug。

怎麼解決呢？那就點選提交的時候，都對所有表單項進行一次驗證，無論是否已經驗證過的。

3、Antd框架的validateFields方法中有一個force屬性可以設定是否對已校驗過的表單項再次校驗，預設是false。

於是我在該方法中新增這個屬性，設定為true。

handleSubmit = (e) => {
 e.preventDefault();
 this.props.form.validateFields({ force: true },values) => { // 設定force為true
 ......
 });
};

這樣就解決了我的問題。

以上這篇解決antd Form 表單校驗方法無響應的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。