antd Form 表單校驗方法無響應的解決方法

今天就跟大家聊聊有關antd Form 表單校驗方法無響應的解決方法，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。

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

里面可以接收校驗字段數組, options, 和一個回調函數

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

校驗全部表單數據

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

發現無響應, 無報錯, 完全蒙逼了, 排查良久, 添加校驗字段后發現可以成功校驗, 于是想著大不了我全部手動添加字段名校驗, 終于, 錯誤的原因浮現出來了

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

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

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

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

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

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

先闡述一下問題：

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

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

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

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

解決問題：

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

自定義表單校驗方法：

handleCheckImg = (rule, value, 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', {
 rules: [
 { required: true, message: '請上傳相關圖片' },
 { validator: this.handleCheckImg },
 ],
 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 }, (err, values) => { // 設置force為true
 ......
 });
};

看完上述內容，你們對antd Form 表單校驗方法無響應的解決方法有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。