Vue怎么使用ElementUI對表單元素進行自定義校驗

今天小編給大家分享一下Vue怎么使用ElementUI對表單元素進行自定義校驗的相關(guān)知識點，內(nèi)容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

非空校驗

知道自定義校驗之前，需要知道基本的非空校驗

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

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

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

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

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

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

除了手機號，密碼，確認密碼這三項，我都是只做了最基本的非空校驗。

我們可以注意到，每一個表單元素都有一個紅色的星號，這就是必輸項的一個標識，我們主要通過這個屬性控制：

required: true

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

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

自定義校驗

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

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

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

定義自定義校驗函數(shù)

針對這種格式，我們就可以使用自定義校驗了，我們可以在data中定義自定義校驗：

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

可以看到首先是判斷輸入的手機號是否為空，如果為空給出的提示是：請輸入手機號碼

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

 // 校驗手機號是否合法
    var checkPhone = (rule, value, callback) => {
		if (value === "") {
			callback(new Error("請輸入手機號碼"))
		} 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("手機號格式有誤,請輸入正確的手機號碼"))
		} else {
			callback()
		}
	};

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

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

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

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

兩次密碼是否相同這個demo直接拿著ElementUI給的demo即可。

以上就是“Vue怎么使用ElementUI對表單元素進行自定義校驗”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注億速云行業(yè)資訊頻道。