vue elementUI之Form表單 驗證

首先說一下 我在form表單裏面碰見的坑：

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

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

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

開始驗證：（建立彈框的肯定按鈕 調用的函數，詳情看最後一張圖）

 

 

addgroupList(formName) {
    this.$refs[formName].validate((valid) => {
      if (valid) {
        const groupName = xxxxxxxxxxxx;
        const description = xxxxxxxxxxxx;
        axios({
          method: 'post',
          url: 'xxxxxxxxxxxxxxxxxxxxx',
          data: {
            groupName: xxxxxxxxxxxxx,
            groupDescription: xxxxxxxxxxxxxxx
          }       
        }).then(res => {
          this.creatGroup = false;
          this.searchGroupName = '';
          this.initData();
        }).catch(error => {
          console.log('網絡錯誤，不能訪問');
        });
      } else {
          console.log('error submit!!');
          return false;
        }
      });
   },

 

好，接下來就要咱們解決上面說的數組的問題了，若是我要傳給後臺的是一個數組，不是對象，我要怎麼去作驗證呢？直接上代碼。

 1 let flag = true;
 2       if (this.$refs[formName] instanceof Array && this.$refs[formName].length > 0) {
 3         this.$refs[formName].forEach((obj, index) => {
 4           obj.validate((valid) => {
 5             if (valid) {
 6               console.log('驗證成功！');
17             } else {
18               console.log('error submit!!');
19               flag = false;
20               return false;
21             }
22           });
23         });
24 
25         if (flag) {
26           this.secondDialog = false;
27           this.thirdDialog = true;
28         }
29       }

 

固然，你要是以爲麻煩，也能夠用JQ的方法去作驗證，這樣簡單一點：（判斷輸入框paramName 是否爲空，若是爲空，顯示錯誤提示信息，不然不顯示）

1 let flag = true;
2 　　this.requestParamsList.map((data, index) => {
3         if (data.paramName == "") {
4           $(".jqueryValidate").eq(index).show();
5           flag = false;
6         }
7     });

最終效果圖以下：

以上就是今天給你們分享的內容，但願你們多多提出本身的建議，謝謝

 

 

 

若是個人內容對你有幫助，歡迎打賞