前言

element中Form表單驗(yàn)證有兩種方式，一種是寫(xiě)在data中，另外一種是直接在表單中標(biāo)簽里面添加即可。

方法步驟

1. 給表單添加 :rules=“rules”,指出表單驗(yàn)證

2.給表單中的標(biāo)簽添加屬性 prop=“名稱(chēng)”,詳細(xì)見(jiàn)下圖:

3.驗(yàn)證規(guī)則的設(shè)置，可以直接寫(xiě)在data區(qū)域中，也可以直接寫(xiě)在標(biāo)簽中

寫(xiě)在data中

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

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

驗(yàn)證寫(xiě)在標(biāo)簽中

我們直接在對(duì)于的標(biāo)簽里面寫(xiě)rules就好了，里面的屬性和上面的是一樣的，這個(gè)時(shí)候我們data中就不用再寫(xiě)rules了.

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

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

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

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

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

• 在線(xiàn)表達(dá)式生成。
• 在線(xiàn)表達(dá)式驗(yàn)證。
• 在線(xiàn)表達(dá)式代碼生成

表單驗(yàn)證不通過(guò)無(wú)法提交

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

1.我們需要給表單添加一個(gè)ref指向，ref=“名稱(chēng)”

2.添加驗(yàn)證不通過(guò)的處理。

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

因?yàn)槲覀兊谋韱悟?yàn)證大部分都是在數(shù)據(jù)的新增和修改操作時(shí)對(duì)數(shù)據(jù)進(jìn)行校驗(yàn)的，當(dāng)我們希望他驗(yàn)證通過(guò)后才進(jìn)行數(shù)據(jù)提交或者其他操作，就可以將邏輯代碼寫(xiě)在我們的if(valid){}中，這樣就達(dá)到了我們想要的效果，例如我的寫(xiě)法是：

取消驗(yàn)證緩存

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

所以我就需要清除這些緩存，再打開(kāi)頁(yè)面的時(shí)候，將緩存清除。這樣就i可以解決問(wèn)題了。

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

動(dòng)態(tài)添加表單標(biāo)簽時(shí)添加驗(yàn)證

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

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

請(qǐng)萬(wàn)分注意prop屬性的格式，一定要按照這個(gè)格式來(lái)寫(xiě)，否則會(huì)無(wú)法綁定到值。

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

需要注意第一個(gè)是被循環(huán)的數(shù)組，其他直接復(fù)制即可，所有的屬性都是v-bind，一定要加上 :，當(dāng)時(shí)我就是因?yàn)樯倭艘粋€(gè)冒號(hào)，怎么樣都實(shí)現(xiàn)不了，還不報(bào)錯(cuò)，搞我一上午，萬(wàn)分注意。

閑談

因?yàn)樽约鹤铋_(kāi)始想要給表單做驗(yàn)證的時(shí)候，直接看element提供的一個(gè)示例代碼，然后再去百度，發(fā)現(xiàn)有不同的寫(xiě)法，就決定記下來(lái)。然后自己當(dāng)時(shí)還遇到了一些其他的問(wèn)題，比如正則表達(dá)式驗(yàn)證不生效呀，如何驗(yàn)證不通過(guò)不提交等，然后百度?，F(xiàn)在決定記下來(lái)免得我下一次忘了，就可以直接看這個(gè)博客就好了。當(dāng)然如果你在看的時(shí)候發(fā)現(xiàn)我哪里寫(xiě)的有問(wèn)題的話(huà)，請(qǐng)指出我改正，謝謝。

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

最新評(píng)論