點擊右上方紅色按鈕關注“web秀”，讓你真正秀起來

前言

表單校驗，在開發中是非常常見的，為了防止用戶誤操作，填寫錯誤數據，亦或是防止用戶惡意提交數據等，都需要前端同學來做一些簡單的表單校驗，雖然只是用來防君子的。今天就為大家推薦一款Vue表單校驗插件：Vuerify。

Vue表單校驗插件Vuerify使用詳細教程及示例

什麼是Vuerify？

Vuerify 是一款輕量級的數據校驗 Vue 插件，同時支持 Vue 1 和 2。可以使用正則、函數定義校驗規則，也可以調用全局設置的規則。 插件會在 Vue 實例上註冊一個 $vuerify 對象，會對聲明的數據進行 watch，實時校驗數據合法性。 同時提供的指令還能方便的操作 DOM。

簡單的講：Vuerify就是自定義指令，用來校驗頁面填寫數據。

Vuerify API

它的API也是相當的簡介啊，所以輕量。

Vue表單校驗插件Vuerify使用詳細教程及示例

這裡重點說一下check()方法，這裡說了校驗指定字段，傳入數組，很多同學容易忽略這個，直接用check()方法，校驗所有的項目，但是有時候不需要校驗所有，比如：分步驟填寫的頁面，先校驗第一步，再下一步，這時候傳入數組來校驗，就至關重要了。

如何使用Vuerify？

npm i vuerify -S

然後我們通過一個簡單示例來給大家講講具體使用方法

Vue表單校驗插件Vuerify使用詳細教程及示例

這裡我們在input上面使用v-vuerify指令，來匹配校驗規則。同時，判斷計算屬性computed裡面的errors，有沒有對應的錯誤，有並將錯誤顯示出來。

js代碼

// 引入插件
import Vue from 'vue'
import Vuerify from 'vuerify'
Vue.use(Vuerify)
export default {
 data() {
 return {
 form: {
 name: '',
 desc: '',
 label: ''
 }
 }
 },
 // 設置校驗規則
 vuerify: {
 'form.name': {
 test: /\w{4,}/,
 message: '至少 4 位字符'
 },
 'form.desc': {
 test: /\w{10,}/,
 message: '至少 10 位字符'
 },
 'form.label': {
 test: /\w{4,}/,
 message: '至少 4 位字符'
 }
 },
 computed: {
 // 計算屬性，獲取校驗不通過的對象
 // 如 { "form.name": "至少 4 位字符", "form.desc": "至少 10 位字符" } 

 errors () {
 return this.$vuerify.$errors
 }
 },
 methods: {
 onSubmit() {
 let verifyList = ['form.name', 'form.desc'];
 // check() 校驗所有規則，參數可以設置需要校驗的數組
 if(!this.$vuerify.check(verifyList)){
 return;
 }
 console.log('驗證通過');
 }
 }
}

最後點擊onSubmit,來再次校驗。但是我們這裡傳了需要校驗的數組，只校驗2個字段。

示例：

這裡直接點擊按鈕，校驗之後校驗前面2個字段：

Vue表單校驗插件Vuerify使用詳細教程及示例

每個字段分別錄入，實時校驗：

Vue表單校驗插件Vuerify使用詳細教程及示例

是不是超級簡單的就實現了你一直想要的效果了？留言說說你的看法，或者留下你寶貴意見。

閱讀更多 web秀 的文章

關鍵字: 表單 校驗 教程