解決antd Form 表單校驗方法無響應(yīng)的問題
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è)置了以后雖然可以正常進行表單驗證了,但是,當點擊了一次提交按鈕后,表單驗證過的表單項不會再進行驗證。那萬一我點擊一次提交后,表單中其他表單項有問題,而圖片上傳沒有問題,那我將其他表單項都填好符合驗證格式后,刪除了圖片,再點擊提交按鈕,表單不會再驗證圖片上傳的表單項,這樣就被通過了,不行呀,這是一個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)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
elementUI中el-table表頭和內(nèi)容全部一行顯示完整的方法
最近參與web開發(fā)時,讓我解決一個elementui控制內(nèi)容單行顯示,下面這篇文章主要給大家介紹了關(guān)于elementUI中el-table表頭和內(nèi)容全部一行顯示完整的方法,需要的朋友可以參考下2023-06-06使用konva和vue-konva庫實現(xiàn)拖拽滑塊驗證功能
這篇文章主要介紹了使用konva和vue-konva完成前端拖拽滑塊驗證功能,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-04