解決antd Form 表單校驗(yàn)方法無(wú)響應(yīng)的問(wèn)題
antd 的 表單校驗(yàn)方法包括 validateFields 和 validateFieldsAndScroll
里面可以接收校驗(yàn)字段數(shù)組, options, 和一個(gè)回調(diào)函數(shù)
from.validateFields([name, age], {}, (err, val)=> {})
校驗(yàn)全部表單數(shù)據(jù)
from.validateFields((err, val)=> {}) // 無(wú)響應(yīng)
發(fā)現(xiàn)無(wú)響應(yīng), 無(wú)報(bào)錯(cuò), 完全蒙逼了, 排查良久, 添加校驗(yàn)字段后發(fā)現(xiàn)可以成功校驗(yàn), 于是想著大不了我全部手動(dòng)添加字段名校驗(yàn), 終于, 錯(cuò)誤的原因浮現(xiàn)出來(lái)了
from.validateFields([name, age], (err, val)=> {}) // 正常
只要校驗(yàn)我自定義的一個(gè)表單組件, 這個(gè)方法就會(huì)無(wú)響應(yīng), 原因就是我自定義組件的自定義校驗(yàn)出現(xiàn)了問(wèn)題
也就是 validator 方法里出現(xiàn)了問(wèn)題 好好看看你的自定義校驗(yàn)吧
rules: [ { validator: (rule, value, callback) => { callback() }, }, ],
補(bǔ)充知識(shí):解決Antd自定義表單驗(yàn)證問(wèn)題
最近項(xiàng)目中遇到一個(gè)表單校驗(yàn)的問(wèn)題,看官方文檔、網(wǎng)上搜索找了好久,終于找到了解決方案。
先闡述一下問(wèn)題:
項(xiàng)目中的表單需要多圖片上傳,這個(gè)使用Upload組件就OK了,但是表單驗(yàn)證就出現(xiàn)問(wèn)題了:
1、首先,上傳圖片項(xiàng)是必須項(xiàng),不能無(wú)圖片提交;
2、已上傳的圖片可以刪除;
3、后端要求提交的圖片為md5格式,通過(guò)上傳接口獲取圖片的md5值,這樣就不能直接使用表單提交時(shí)獲取的 value值,因 為它的值是本地路徑,所以我通過(guò)model中上傳圖片獲取md5的值存在model的state中 (這個(gè)問(wèn)題是最棘手的)。
解決問(wèn)題:
1、首先我自定義了一個(gè)表單驗(yàn)證方法,因?yàn)樾枰陨蟼鞒晒Φ膱D片為基準(zhǔn)。
自定義表單校驗(yàn)方法:
handleCheckImg = (rule, value, callback) => { if (value) { const { aware } = this.props; const { fileList } = aware; const newFileList=fileList.map(item => ({...item})); if (!newFileList) { callback('請(qǐng)上傳相關(guān)圖片'); } else { newFileList.length ? callback() : callback('請(qǐng)上傳相關(guān)圖片'); } } callback(); // callback方法必須要有,否則會(huì)報(bào)錯(cuò) };
在表單中調(diào)用:
<FormItem label="上傳圖片"> {getFieldDecorator('attachment', { rules: [ { required: true, message: '請(qǐng)上傳相關(guān)圖片' }, { validator: this.handleCheckImg }, ], })( <div className="clearfix"> <Upload {...uploadProps} > ...... </Upload> </div> )} </FormItem>
此時(shí)表單的驗(yàn)證規(guī)則會(huì)調(diào)用到自定義的表單驗(yàn)證方法,但是由于驗(yàn)證方法默認(rèn)是在表單onChange的時(shí)候調(diào)用,而默認(rèn)onChange時(shí)進(jìn)行表單驗(yàn)證,在model中用于存放圖片md5值的變量還沒(méi)有進(jìn)行更新這里就已經(jīng)進(jìn)行驗(yàn)證了,這樣的驗(yàn)證會(huì)導(dǎo)致,即便我已經(jīng)上傳了一張圖片,頁(yè)面上仍然會(huì)提示要我上傳相關(guān)圖片,刪除圖片卻不會(huì)調(diào)用到表單驗(yàn)證。
那要怎么解決?那就讓我點(diǎn)擊按鈕準(zhǔn)備submit時(shí)進(jìn)行表單驗(yàn)證吧。
2、通過(guò)看文檔,表單的getFieldDecorator方法中有個(gè)屬性validateTrigger可以設(shè)置什么時(shí)候進(jìn)行表單驗(yàn)證,默認(rèn)是onChange。
于是我在方法中添加該屬性,設(shè)置為onSubmit:
getFieldDecorator('attachment', { rules: [ { required: true, message: '請(qǐng)上傳相關(guān)圖片' }, { validator: this.handleCheckImg }, ], validateTrigger: 'onSubmit', // 設(shè)置進(jìn)行表單驗(yàn)證的時(shí)機(jī)為onSubmit initialValue: detail ? detail.imgList : null, })
這樣設(shè)置了以后雖然可以正常進(jìn)行表單驗(yàn)證了,但是,當(dāng)點(diǎn)擊了一次提交按鈕后,表單驗(yàn)證過(guò)的表單項(xiàng)不會(huì)再進(jìn)行驗(yàn)證。那萬(wàn)一我點(diǎn)擊一次提交后,表單中其他表單項(xiàng)有問(wèn)題,而圖片上傳沒(méi)有問(wèn)題,那我將其他表單項(xiàng)都填好符合驗(yàn)證格式后,刪除了圖片,再點(diǎn)擊提交按鈕,表單不會(huì)再驗(yàn)證圖片上傳的表單項(xiàng),這樣就被通過(guò)了,不行呀,這是一個(gè)bug。
怎么解決呢?那就點(diǎn)擊提交的時(shí)候,都對(duì)所有表單項(xiàng)進(jìn)行一次驗(yàn)證,無(wú)論是否已經(jīng)驗(yàn)證過(guò)的。
3、Antd框架的validateFields方法中有一個(gè)force屬性可以設(shè)置是否對(duì)已校驗(yàn)過(guò)的表單項(xiàng)再次校驗(yàn),默認(rèn)是false。
于是我在該方法中添加這個(gè)屬性,設(shè)置為true。
handleSubmit = (e) => { e.preventDefault(); this.props.form.validateFields({ force: true }, (err, values) => { // 設(shè)置force為true ...... }); };
這樣就解決了我的問(wèn)題。
以上這篇解決antd Form 表單校驗(yàn)方法無(wú)響應(yīng)的問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
elementUI中el-table表頭和內(nèi)容全部一行顯示完整的方法
最近參與web開(kāi)發(fā)時(shí),讓我解決一個(gè)elementui控制內(nèi)容單行顯示,下面這篇文章主要給大家介紹了關(guān)于elementUI中el-table表頭和內(nèi)容全部一行顯示完整的方法,需要的朋友可以參考下2023-06-06在vue3項(xiàng)目中實(shí)現(xiàn)國(guó)際化的代碼示例
國(guó)際化就是指在一個(gè)項(xiàng)目中,項(xiàng)目中的語(yǔ)言可以進(jìn)行切換(中英文切換),那么在實(shí)際項(xiàng)目中是如何實(shí)現(xiàn)的呢,本文就給大家詳細(xì)的介紹實(shí)現(xiàn)方法,需要的朋友可以參考下2023-07-07axios+vue請(qǐng)求時(shí)攜帶cookie的方法實(shí)例
做項(xiàng)目時(shí)遇到一個(gè)需求,后端需要在接口請(qǐng)求時(shí),對(duì)用戶(hù)登陸狀態(tài)進(jìn)行判斷,需要在請(qǐng)求時(shí)攜帶Cookie,下面這篇文章主要給大家介紹了關(guān)于axios+vue請(qǐng)求時(shí)攜帶cookie的相關(guān)資料,需要的朋友可以參考下2022-09-09使用konva和vue-konva庫(kù)實(shí)現(xiàn)拖拽滑塊驗(yàn)證功能
這篇文章主要介紹了使用konva和vue-konva完成前端拖拽滑塊驗(yàn)證功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-04-04Vue全局loading及錯(cuò)誤提示的思路與實(shí)現(xiàn)
這篇文章主要給大家介紹了關(guān)于Vue全局loading及錯(cuò)誤提示的思路與實(shí)現(xiàn)方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08vue項(xiàng)目實(shí)現(xiàn)登陸注冊(cè)效果
這篇文章主要為大家詳細(xì)介紹了vue項(xiàng)目實(shí)現(xiàn)登陸注冊(cè)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09