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)站的支持！

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com