iview同時(shí)驗(yàn)證多個(gè)表單問(wèn)題總結(jié)
iview驗(yàn)證一個(gè)表單問(wèn)題：
在上一篇文章中總結(jié)了iview表單驗(yàn)證的問(wèn)題。其實(shí)有兩種寫(xiě)法：在點(diǎn)擊驗(yàn)證時(shí)，這樣寫(xiě)時(shí)，注意在前面的方法中將要驗(yàn)證的form表單加進(jìn)去。
<Form ref="addAreaForm" :model="addAreaForm" :rules="ruleValidate" :label-width="120"></Form>
//點(diǎn)擊確認(rèn)按鈕
<Button type='primary' @click='addAreaOK("addAreaForm")'>確定</Button>
addAreaOK(name){
this.$refs[name].validate((valid)=>{
if (valid){
alert('驗(yàn)證成功')
}
})
}
還有一種寫(xiě)法：保存按鈕不傳form表單，在驗(yàn)證時(shí)直接this.$refs.addpurchaseForm.validate
<Button type="primary" @click="handleSubmit">保存</Button>
this.$refs.addpurchaseForm.validate((valid) => {
// console.log(valid)
if (valid) {
alert('驗(yàn)證成功')
}
}）
iview驗(yàn)證多個(gè)表單問(wèn)題：在多表單驗(yàn)證時(shí)，讓頁(yè)面中的兩個(gè)form都通過(guò)校驗(yàn)才能保存。解決方法就是:先驗(yàn)證第一個(gè)，在第一個(gè)驗(yàn)證通過(guò)得里面，驗(yàn)證第二個(gè)。
this.$refs.addpurchaseForm.validate((valid) => {
// console.log(valid) //第一層驗(yàn)證第一個(gè)表單
if (valid) {
this.$refs.gasDataForm.validate((valid) => {
// console.log(valid)//第二層驗(yàn)證第二個(gè)表單
if(valid){
alert('驗(yàn)證成功')
}
})
}
})
補(bǔ)充：iview 表單number驗(yàn)證
將原來(lái)的number轉(zhuǎn)為string來(lái)處理，并且在驗(yàn)證中判斷是否是整數(shù)。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue-router 路由傳參問(wèn)題(路由傳參方式)
路由傳參主要有兩種方式一種是路徑傳參一種是參數(shù)傳遞,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-11-11
這篇文章主要介紹了在vue3中使用jsx語(yǔ)法,下面主要通過(guò)對(duì)比jsx和template不同語(yǔ)法，來(lái)實(shí)現(xiàn)同樣的功能，需要的朋友可以參考下2023-03-03
這篇文章主要介紹了vue如何修改瀏覽器的標(biāo)題title問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
今天小編就為大家分享一篇關(guān)于vue項(xiàng)目打包之后背景樣式丟失的解決方案，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2019-01-01
Vue?Baidu?Map之自定義點(diǎn)圖標(biāo)bm-marker的示例
這篇文章主要介紹了Vue?Baidu?Map之自定義點(diǎn)圖標(biāo)bm-marker,文中給大家介紹了vue-baidu-api地圖標(biāo)記點(diǎn)（自定義標(biāo)記圖標(biāo)），設(shè)置標(biāo)記點(diǎn)的優(yōu)先級(jí)問(wèn)題，結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-08-08
vue添加錨點(diǎn),實(shí)現(xiàn)滾動(dòng)頁(yè)面時(shí)錨點(diǎn)添加相應(yīng)的class操作
這篇文章主要介紹了vue添加錨點(diǎn),實(shí)現(xiàn)滾動(dòng)頁(yè)面時(shí)錨點(diǎn)添加相應(yīng)的class操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
這篇文章主要給大家介紹了關(guān)于vue上傳圖片文件的相關(guān)資料，介紹了利用原始input標(biāo)簽form表單上傳、elementui自帶的el-upload上傳以及elementui實(shí)現(xiàn)一次性上傳多張圖片等方法，需要的朋友可以參考下2021-05-05
Vue實(shí)現(xiàn)Hover功能(mouseover與mouseenter的區(qū)別及說(shuō)明)
這篇文章主要介紹了Vue實(shí)現(xiàn)Hover功能(mouseover與mouseenter的區(qū)別及說(shuō)明)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
基于vue.js組件實(shí)現(xiàn)分頁(yè)效果
這篇文章主要為大家詳細(xì)介紹了基于vue.js組件實(shí)現(xiàn)分頁(yè)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
從Vue轉(zhuǎn)換看Webpack與Vite 代碼轉(zhuǎn)換機(jī)制差異詳解
這篇文章主要為大家介紹了從Vue轉(zhuǎn)換看Webpack與Vite代碼轉(zhuǎn)換機(jī)制差異詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10