前言

element中Form表單驗證有兩種方式，一種是寫在data中，另外一種是直接在表單中標簽里面添加即可。

方法步驟

1. 給表單添加 :rules=“rules”,指出表單驗證

2.給表單中的標簽添加屬性 prop=“名稱”,詳細見下圖:

3.驗證規(guī)則的設(shè)置，可以直接寫在data區(qū)域中，也可以直接寫在標簽中

寫在data中

      rules:{
        size: [ {required: true,trigger: 'blur', message: "尺寸必須填寫" },
                 {type:'number',message: "尺寸必須為數(shù)字"},
        ],
        modelCode: [ {required: true,trigger: 'blur', message: "模具代碼必須填寫" }
        ],
        exitStatus: [ {required: true,trigger: 'blur', message: "出口狀態(tài)必須填寫" }
        ],
      },

required是必填，trigger: 'blur'是鼠標光標消失，message是條件不滿足時提示的消息，type:'number'表示該輸入框中數(shù)據(jù)只能為數(shù)字，可以定義max，min等等一系列屬性，具體請查看element的官方文檔: 表單驗證高級用法。具體的代碼位置如下圖:

驗證寫在標簽中

我們直接在對于的標簽里面寫rules就好了，里面的屬性和上面的是一樣的，這個時候我們data中就不用再寫rules了.

:rules="[{required: true, trigger: 'blur', message: '尺寸必須填寫'},{type: 'number', message: '尺寸必須為數(shù)字'}]"

這個時候我們就已經(jīng)實現(xiàn)了表單的驗證了，如果不滿足條件，對于的標簽框下就會出現(xiàn)自己定義的message信息。當然，我們也可以針對針對自己定義的正則表達式規(guī)則去進行校驗。

        phone: [ {required: true, trigger: "blur", message: "手機號格式不正確",
                  pattern: /^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/,} ]

我們只需要添加pattren屬性，并且規(guī)定他的正則表達式即可，注意正則表達式不需要雙引號包裹.

想查找正則表達式可以查看以下網(wǎng)址：

• 在線表達式生成。
• 在線表達式驗證。
• 在線表達式代碼生成

表單驗證不通過無法提交

我們設(shè)置了表單驗證之后，我們肯定是想這個表單在驗證不通過的情況下是無法進行后續(xù)操作的，比如將數(shù)據(jù)傳給后端進行數(shù)據(jù)處理等。所以，我們還需要設(shè)置表單驗證不通過后，無法進行后續(xù)操作。

1.我們需要給表單添加一個ref指向，ref=“名稱”

2.添加驗證不通過的處理。

// 這個form就是上面自己定義的名稱
      this.$refs['form'].validate((valid) => {
        if (valid) { //如果驗證通過，可以在后面自己加上else驗證不通過
                  //自己的邏輯代碼
          })
        }

因為我們的表單驗證大部分都是在數(shù)據(jù)的新增和修改操作時對數(shù)據(jù)進行校驗的，當我們希望他驗證通過后才進行數(shù)據(jù)提交或者其他操作，就可以將邏輯代碼寫在我們的if(valid){}中，這樣就達到了我們想要的效果，例如我的寫法是：

取消驗證緩存

當我們給表單設(shè)置了驗證消息后，通常會有緩存的存在，例如我的表單是設(shè)置再彈出框中的，當我的表單部分標簽不符合規(guī)則時就會給出提示，但是我直接關(guān)閉該彈出頁面然后再打開時，不符合驗證規(guī)則的提示還是會存在，如下圖：這肯定是我不想要的，我想他打開的時候就是默認的狀態(tài)，不存在這些提示信息。

所以我就需要清除這些緩存，再打開頁面的時候，將緩存清除。這樣就i可以解決問題了。

	  //添加if判斷是為了防止當表單沒有驗證信息緩存的時候，這個時候直接調(diào)用恢復(fù)方法頁面的控制臺會提示錯誤，
	  //強迫癥犯了，就加一個判斷，有才清除，沒有就不清除
      if (this.$refs['form'] != undefined) {
        this.$refs['form'].resetFields(); 
      }

動態(tài)添加表單標簽時添加驗證

當我們需要再表單中允許動態(tài)的添加和刪除某一個固定的表單信息時，我的實現(xiàn)方式是使用for循環(huán)，對一個數(shù)組進行循環(huán)，新增和刪除就是直接對這個數(shù)組進行push和splice操作，添加和和刪除對象，因為vue雙向綁定機制，會自動重新渲染。實現(xiàn)表單驗證信息很簡單，我們只需要再表單上添加prop屬性，然后添加rules驗證就好了。如圖：

:prop="'ThreadBodyList.' + index + '.value'"
:rules="{required: true, trigger: 'blur',message: '線體不能為空',}"

請萬分注意prop屬性的格式，一定要按照這個格式來寫，否則會無法綁定到值。

格式： 被進行循環(huán)的數(shù)組(我的是ThreadBodyList) + ‘.’ + index(循環(huán)的下標) + ‘.’ + value。

需要注意第一個是被循環(huán)的數(shù)組，其他直接復(fù)制即可，所有的屬性都是v-bind，一定要加上 :，當時我就是因為少了一個冒號，怎么樣都實現(xiàn)不了，還不報錯，搞我一上午，萬分注意。

閑談

因為自己最開始想要給表單做驗證的時候，直接看element提供的一個示例代碼，然后再去百度，發(fā)現(xiàn)有不同的寫法，就決定記下來。然后自己當時還遇到了一些其他的問題，比如正則表達式驗證不生效呀，如何驗證不通過不提交等，然后百度。現(xiàn)在決定記下來免得我下一次忘了，就可以直接看這個博客就好了。當然如果你在看的時候發(fā)現(xiàn)我哪里寫的有問題的話，請指出我改正，謝謝。

到此這篇關(guān)于ElementPlus表單rules校驗的文章就介紹到這了,更多相關(guān)ElementPlus表單rules校驗內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論