Vue ElementUI之Form表單驗(yàn)證遇到的問(wèn)題
首先說(shuō)一下 我在form表單里面遇見(jiàn)的坑：
1.例如我要給后臺(tái)傳的不是對(duì)象，而是一個(gè)數(shù)組，怎么寫驗(yàn)證？
2.比如我有四個(gè)彈出框，都要做驗(yàn)證，這個(gè)時(shí)候就要注意了，每一個(gè)彈出框的ref都不能給的一樣，并且一定要與當(dāng)前彈框的確定或者保存按鈕一一對(duì)應(yīng)，例如：第一個(gè)彈框的ref='number',按鈕的click比如為xxxxxx('number'),第二個(gè)彈出框的ref=‘number2'，對(duì)應(yīng)的按鈕>>xxxxxx('number2')。如果ref用的都一樣，就會(huì)出現(xiàn)，點(diǎn)擊下一步我沒(méi)有去做驗(yàn)證，我再點(diǎn)擊上一步，再點(diǎn)擊下一步，控制臺(tái)就會(huì)報(bào)錯(cuò)！
官網(wǎng)給的列子是在<el-form>里面進(jìn)行驗(yàn)證，（當(dāng)然也可以不用再標(biāo)簽里面進(jìn)行驗(yàn)證，這里我重要說(shuō)在標(biāo)簽里?。。。?，標(biāo)簽上要綁定一個(gè)對(duì)象（例，:model='numberValidateForm'）,注意：model綁定的必須是一個(gè)對(duì)象，如果是一個(gè)數(shù)組怎么辦呢？這個(gè)下面再說(shuō)，ref="numberValidateForm" 是什么呢，我要對(duì)表單進(jìn)行驗(yàn)證，當(dāng)然少不了確定或者保存按鈕，名字需要和按鈕一一對(duì)應(yīng)，這樣才能實(shí)現(xiàn) 點(diǎn)擊保存的時(shí)候去驗(yàn)證輸入框，上圖！
好，接下來(lái)就要我們解決上面說(shuō)的數(shù)組的問(wèn)題了，如果我要傳給后臺(tái)的是一個(gè)數(shù)組，不是對(duì)象，我要怎么去做驗(yàn)證呢？直接上代碼。
let flag = true;
if (this.$refs[formName] instanceof Array && this.$refs[formName].length > 0) {
this.$refs[formName].forEach((obj, index) => {
obj.validate((valid) => {
if (valid) {
console.log('驗(yàn)證成功！');
} else {
console.log('error submit!!');
flag = false;
return false;
}
});
});
if (flag) {
this.secondDialog = false;
this.thirdDialog = true;
}
}
當(dāng)然，你要是覺(jué)得麻煩，也可以用JQ的方法去做驗(yàn)證，這樣簡(jiǎn)單一點(diǎn)：（判斷輸入框paramName 是否為空，如果為空，顯示錯(cuò)誤提示信息，否則不顯示）
let flag = true;
this.requestParamsList.map((data, index) => {
if (data.paramName == "") {
$(".jqueryValidate").eq(index).show();
flag = false;
}
});
最終效果圖如下：
總結(jié)
以上所述是小編給大家介紹的Vue ElementUI之Form表單驗(yàn)證遇到的問(wèn)題，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
- vue+elementUI動(dòng)態(tài)增加表單項(xiàng)并添加驗(yàn)證的代碼詳解
- vue+ElementUI 關(guān)閉對(duì)話框清空驗(yàn)證,清除form表單的操作
- vue elementUI 表單嵌套驗(yàn)證的實(shí)例代碼
- vue elementui el-form rules動(dòng)態(tài)驗(yàn)證的實(shí)例代碼詳解
- vue+elementUI實(shí)現(xiàn)表單和圖片上傳及驗(yàn)證功能示例
- vue elementui form表單驗(yàn)證的實(shí)現(xiàn)
- vue+elementUI用戶修改密碼的前端驗(yàn)證規(guī)則
相關(guān)文章
vue+elementUI實(shí)現(xiàn)點(diǎn)擊左右箭頭切換按鈕功能
這篇文章主要介紹了vue+elementUI實(shí)現(xiàn)點(diǎn)擊左右箭頭切換按鈕功能,樣式可以根據(jù)自己需求改動(dòng),感興趣的朋友可以參考下實(shí)現(xiàn)代碼2024-05-05
這篇文章主要介紹了vue 自定義組件的寫法與用法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2020-03-03
這篇文章主要介紹了vue源碼解析之事件機(jī)制原理，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
vue?elementUi中的tabs標(biāo)簽頁(yè)使用教程
Tabs 組件提供了選項(xiàng)卡功能,默認(rèn)選中第一個(gè)標(biāo)簽頁(yè),下面這篇文章主要給大家介紹了關(guān)于vue?elementUi中的tabs標(biāo)簽頁(yè)使用的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03
vue-element-admin中node-sass換成dart-sass,安裝依賴報(bào)code?128多種問(wèn)題的解決
這篇文章主要介紹了vue-element-admin中node-sass換成dart-sass,安裝依賴報(bào)code?128多種問(wèn)題的解決方法,本文給大家分享問(wèn)題原因分析及解決方法，需要的朋友可以參考下2023-02-02
vue2.x element-ui實(shí)現(xiàn)pc端購(gòu)物車頁(yè)面demo
這篇文章主要為大家介紹了vue2.x element-ui實(shí)現(xiàn)pc端購(gòu)物車頁(yè)面demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
ElementUI嵌套頁(yè)面及關(guān)聯(lián)增刪查改實(shí)現(xiàn)示例
本文主要介紹了ElementUI嵌套頁(yè)面及關(guān)聯(lián)增刪查改實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
Vue使用Element-UI生成并展示表頭序號(hào)的方法
序號(hào)算是在展示數(shù)據(jù)的時(shí)候，一種很普遍的屬性了，我們可以自己寫生成序號(hào)的規(guī)則，也可以借助第三方，這篇文章主要介紹了Vue使用Element-UI生成并展示表頭序號(hào)的方法,需要的朋友可以參考下2023-01-01
本文主要介紹了ElementUI中el-tabs事件綁定的具體使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
簡(jiǎn)述vue-cli中chainWebpack的使用方法
今天就主要來(lái)講一下在vue.config.js中對(duì)一些配置的更改，簡(jiǎn)單介紹一下loader的使用；用configureWebpack簡(jiǎn)單的配置；用chainWebpack做高級(jí)配置；包括對(duì)loader的添加，修改；以及插件的配置，需要的朋友可以參考下2019-07-07