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-Cli 3.0 中配置高德地圖的兩種方式，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06
element ui loading加載開(kāi)啟與關(guān)閉方式
這篇文章主要介紹了element ui loading加載開(kāi)啟與關(guān)閉方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
Vue組件傳值方式(props屬性,父到子,子到父,兄弟傳值)
這篇文章主要介紹了Vue組件傳值方式(props屬性,父到子,子到父,兄弟傳值),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
vue 計(jì)算屬性和偵聽(tīng)器的使用小結(jié)
這篇文章主要介紹了vue 計(jì)算屬性和偵聽(tīng)器的使用小結(jié)，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01
基于ant-design-vue實(shí)現(xiàn)表格操作按鈕組件
這篇文章主要為大家介紹了基于ant-design-vue實(shí)現(xiàn)表格操作按鈕組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
這篇文章主要為大家詳細(xì)介紹了vue封裝組件之上傳圖片組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
vue如何通過(guò)id從列表頁(yè)跳轉(zhuǎn)到對(duì)應(yīng)的詳情頁(yè)
這篇文章主要介紹了vue如何通過(guò)id從列表頁(yè)跳轉(zhuǎn)到對(duì)應(yīng)的詳情頁(yè) ,需要的朋友可以參考下2018-05-05
Vue純前端實(shí)現(xiàn)導(dǎo)出Excel并修改樣式
這篇文章主要為大家詳細(xì)介紹了Vue如何利用xlsx-style庫(kù)實(shí)現(xiàn)導(dǎo)出Excel并修改樣式的功能,文中的示例代碼講解詳細(xì),有需要的可以參考下2024-01-01
VUE JS 使用組件實(shí)現(xiàn)雙向綁定的示例代碼
本篇文章主要介紹了VUE JS 使用組件實(shí)現(xiàn)雙向綁定，詳細(xì)的介紹了vue的雙向數(shù)據(jù)綁定原理以及核心代碼模塊，具有一定的參考價(jià)值，有興趣的可以了解一下。2017-01-01
CryptoJS是一個(gè)強(qiáng)大的JavaScript庫(kù),它提供了多種加密解密功能,尤其是AES加密方法,使用CryptoJS,我們可以有效地保護(hù)數(shù)據(jù)安全,防止信息泄露,通過(guò)簡(jiǎn)單的安裝和函數(shù)編寫(xiě),本文給大家介紹Vue3 如何使用CryptoJS加密,感興趣的朋友一起看看吧2024-10-10