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è)參考，也希望大家多多支持腳本之家。

最新評(píng)論