快捷導(dǎo)航

Vue如何使用ElementUI對(duì)表單元素進(jìn)行自定義校驗(yàn)及踩坑

更新時(shí)間：2023年02月22日 10:57:44 作者：小花皮豬

有一些驗(yàn)證不是通過input select這樣的受控組件來觸發(fā)驗(yàn)證條件的 ,可以通過自定義驗(yàn)證的方法來觸發(fā),下面這篇文章主要給大家介紹了關(guān)于Vue如何使用ElementUI對(duì)表單元素進(jìn)行自定義校驗(yàn)及踩坑的相關(guān)資料,需要的朋友可以參考下

前言

在使用ElementUI的表單元素時(shí)候，除了做一些簡(jiǎn)單的非空處理校驗(yàn)，在一些特殊的場(chǎng)合，還需要我們做一些自定義校驗(yàn)。

其實(shí)ElementUI不僅提供了基本的非空校驗(yàn)，也對(duì)我們提供了自定義檢驗(yàn)。

在使用的時(shí)候還是遇到了一些坑，下面簡(jiǎn)單的總結(jié)分享下

非空校驗(yàn)

知道自定義校驗(yàn)之前，需要知道基本的非空校驗(yàn)

如下圖，ElementUI已經(jīng)幫助我們創(chuàng)建好了一個(gè)簡(jiǎn)單的demo，我們直接拿來用即可。

這里我也是直接復(fù)制的demo，然后根據(jù)自己需求進(jìn)行修改。

簡(jiǎn)單的說下相關(guān)的一些地方吧

一個(gè)表單包含著很多頁面元素，根據(jù)自己的需求使用不同的組件去拼接即可：

表單的元素我們可以直接在data生成一個(gè)表單數(shù)據(jù)，把里面的屬性都放在數(shù)據(jù)里面，這樣可以直接把這個(gè)表單傳到后臺(tái)進(jìn)行交互。不然一個(gè)一個(gè)傳也太麻煩了

然后就是檢驗(yàn)(rules)，這里一般做對(duì)表單元素校驗(yàn)的處理

除了手機(jī)號(hào)，密碼，確認(rèn)密碼這三項(xiàng)，我都是只做了最基本的非空校驗(yàn)。

我們可以注意到，每一個(gè)表單元素都有一個(gè)紅色的星號(hào)，這就是必輸項(xiàng)的一個(gè)標(biāo)識(shí)，我們主要通過這個(gè)屬性控制：

required: true

比如我現(xiàn)在把用戶名的required: true去掉

頁面上的非空校驗(yàn)就沒了，所以不論你校驗(yàn)寫的再好，不加這個(gè)屬性就等于沒用。

自定義校驗(yàn)

我主要以兩個(gè)較為經(jīng)典的例子舉例，一個(gè)是手機(jī)號(hào)的格式，一個(gè)是密碼和確認(rèn)密碼的判斷是否相同

關(guān)于表單的自定義校驗(yàn)ElementUI也給了demo，就是我的第二個(gè)例子

大家都知道，手機(jī)號(hào)都是有一定的規(guī)則的，不是只有11位數(shù)字就是這么簡(jiǎn)單的，還要以固定格式開頭等。

定義自定義校驗(yàn)函數(shù)

針對(duì)這種格式，我們就可以使用自定義校驗(yàn)了，我們可以在data中定義自定義校驗(yàn)：

可以理解成把它理解成一個(gè)變量，有著自定義的回調(diào)函數(shù)進(jìn)行自定義錯(cuò)誤提示

可以看到首先是判斷輸入的手機(jī)號(hào)是否為空，如果為空給出的提示是：請(qǐng)輸入手機(jī)號(hào)碼

如果輸入的手機(jī)號(hào)不為空，那么就通過正則表達(dá)式判斷是否合法，如果不合法的話，同樣給出對(duì)應(yīng)的提示信息，這便是自定義校驗(yàn)，根據(jù)自己的需求定義自己的規(guī)則。

 // 校驗(yàn)手機(jī)號(hào)是否合法
    var checkPhone = (rule, value, callback) => {
		if (value === "") {
			callback(new Error("請(qǐng)輸入手機(jī)號(hào)碼"))
		} else if (!/^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/.test(value)) {
			callback(new Error("手機(jī)號(hào)格式有誤,請(qǐng)輸入正確的手機(jī)號(hào)碼"))
		} else {
			callback()
		}
	};

使用自定義校驗(yàn)函數(shù)

使用起來也很簡(jiǎn)單，在原有的表單校驗(yàn)基礎(chǔ)上加上validator屬性，值就是定義自定義函數(shù)的變量名

注意：使用了自定義校驗(yàn)函數(shù)之后，就不要在這里寫message提示信息了。直接在函數(shù)里面定義錯(cuò)誤信息即可。

  phone: [ { required: true,validator: checkPhone, trigger: 'blur' }],

兩次密碼是否相同這個(gè)demo直接拿著ElementUI給的demo即可。這里不再贅述

總結(jié)

通過表單自定義校驗(yàn)，大大提高了靈活性和可控性。個(gè)人還是比較喜歡的

到此這篇關(guān)于Vue如何使用ElementUI對(duì)表單元素進(jìn)行自定義校驗(yàn)及踩坑的文章就介紹到這了,更多相關(guān)Vue用ElementUI對(duì)表單自定義校驗(yàn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: