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

里面可以接收校驗字段數(shù)組, options, 和一個回調(diào)函數(shù)

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

校驗全部表單數(shù)據(jù)

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

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

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

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

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

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

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

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

先闡述一下問題：

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

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('請上傳相關(guān)圖片');
 } else {
 newFileList.length ? callback() : callback('請上傳相關(guān)圖片');
 }
 }
 callback(); // callback方法必須要有，否則會報錯
};

在表單中調(diào)用：

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

此時表單的驗證規(guī)則會調(diào)用到自定義的表單驗證方法，但是由于驗證方法默認是在表單onChange的時候調(diào)用，而默認onChange時進行表單驗證，在model中用于存放圖片md5值的變量還沒有進行更新這里就已經(jīng)進行驗證了，這樣的驗證會導(dǎo)致，即便我已經(jīng)上傳了一張圖片，頁面上仍然會提示要我上傳相關(guān)圖片，刪除圖片卻不會調(diào)用到表單驗證。

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

2、通過看文檔，表單的getFieldDecorator方法中有個屬性validateTrigger可以設(shè)置什么時候進行表單驗證，默認是onChange。

于是我在方法中添加該屬性，設(shè)置為onSubmit：

getFieldDecorator('attachment', {
 rules: [
 { required: true, message: '請上傳相關(guān)圖片' },
 { validator: this.handleCheckImg },
 ],
 validateTrigger: 'onSubmit', // 設(shè)置進行表單驗證的時機為onSubmit
 initialValue: detail ? detail.imgList : null,
})

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

怎么解決呢？那就點擊提交的時候，都對所有表單項進行一次驗證，無論是否已經(jīng)驗證過的。

3、Antd框架的validateFields方法中有一個force屬性可以設(shè)置是否對已校驗過的表單項再次校驗，默認是false。

于是我在該方法中添加這個屬性，設(shè)置為true。

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

這樣就解決了我的問題。

以上這篇解決antd Form 表單校驗方法無響應(yīng)的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論