Vue ElementUI之Form表單驗證遇到的問題

首先說一下 我在form表單里面遇見的坑：

1.例如我要給后臺傳的不是對象，而是一個數組，怎么寫驗證？

2.比如我有四個彈出框，都要做驗證，這個時候就要注意了，每一個彈出框的ref都不能給的一樣，并且一定要與當前彈框的確定或者保存按鈕一一對應，例如：第一個彈框的ref='number',按鈕的click比如為xxxxxx('number'),第二個彈出框的ref=‘number2'，對應的按鈕>>xxxxxx('number2')。如果ref用的都一樣，就會出現，點擊下一步我沒有去做驗證，我再點擊上一步，再點擊下一步，控制臺就會報錯！

官網給的列子是在<el-form>里面進行驗證，（當然也可以不用再標簽里面進行驗證，這里我重要說在標簽里！！！），標簽上要綁定一個對象（例，:model='numberValidateForm'）,注意：model綁定的必須是一個對象，如果是一個數組怎么辦呢？這個下面再說，ref="numberValidateForm" 是什么呢，我要對表單進行驗證，當然少不了確定或者保存按鈕，名字需要和按鈕一一對應，這樣才能實現 點擊保存的時候去驗證輸入框，上圖！

好，接下來就要我們解決上面說的數組的問題了，如果我要傳給后臺的是一個數組，不是對象，我要怎么去做驗證呢？直接上代碼。

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('驗證成功！');
 } else {
 console.log('error submit!!');
 flag = false;
 return false;
 }
 });
 });
 if (flag) {
 this.secondDialog = false;
 this.thirdDialog = true;
 }
 }

當然，你要是覺得麻煩，也可以用JQ的方法去做驗證，這樣簡單一點：（判斷輸入框paramName 是否為空，如果為空，顯示錯誤提示信息，否則不顯示）

 let flag = true;
 　　this.requestParamsList.map((data, index) => {
 if (data.paramName == "") {
 $(".jqueryValidate").eq(index).show();
 flag = false;
 }
 });

最終效果圖如下：

總結

以上所述是小編給大家介紹的Vue ElementUI之Form表單驗證遇到的問題，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com