利用vuelidate做前端驗證吧!(30 Days challenge-17)

前言

還記得在之前的每日挑戰中，我做了一個todo-list嗎?(利用vuetify & firebase資料庫打造todo-list!)，當時在新增代辦事項時有弄出一個popup，裡面我利用vuetify本身的屬性去做了基本的前端驗證。
不過其實就我們之前的團隊開發經驗來說，那樣的驗證實在太過簡易，當時那位負責前端的朋友就有向我提過vuelidate這個輕量套件，今天就來體驗一下它的魅力吧!

Vuelidate.js基本介紹

vuelidate是一個專門給vue2.0使用的驗證套件，使用起來非常非常的簡單，功能也非常強大，裡面提供了各種不同你可能會用到的表單驗證方法，當然也可以自己客製所需要的驗證。我們先來看一下基本的安裝流程。

step 1 套件安裝

若你習慣用npm安裝

npm install vuelidate --save

或是你是用vue-cli開發的話

vue add vuelidate

step 2 在專案中載入vuelidate

官方文件提供了兩種不同的載入方式。

一種是在src/main.js中直接全域載入

import Vue from 'vue'
import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)

另一種方式則是在你指定的component內載入。

import { validationMixin } from 'vuelidate'

var Component = Vue.extend({
  mixins: [validationMixin],
  validations: { ... }
})

step 3 在需要的component內引入vuelidate 與 所需要的函數

// Login.vue
import { validationMixin } from 'vuelidate' 
import { required, email } from 'vuelidate/lib/validators'

required & email是驗證的函數，完整的驗證函數清單可以參照官方文件。

使用重點摘要

其實官方文件上寫得非常的詳細，我這邊紀錄幾個我在實作時可能比較迷惑的地方。

• 在專案載入vuelidate後，你可以從vueDevTool找到一個$v的屬性，裡面會記錄著所有你要驗證的屬性
• 表單驗證可以透過$model操作，但我這次是採用另一種方法 $touch & $dirty，就是字面上的意思，一旦經過任何改動，那個屬性就髒掉了(it’s dirty now)，vuelidate便會去驗證髒掉的屬性是否符合你設置的驗證規則
• 在處理submit時，可以藉由判斷this.$v.$invalid是否所有的欄位都通過驗證
• 錯誤訊息可以藉由:error-messages來顯示，配合computed綁定一個陣列即可
• 一般來說，在輸入以及游標離開該欄位的時候都需要做驗證(@input & @blur)
• vuelidate是可以輕鬆的客製化驗證，舉個例子來說，我今天希望使用者的密碼要包含一堆有的沒的，那我就可以先宣告一個函數，之後把這個函數當作我的驗證規則，如下例

const passwordValidate = function (value) {
  const regrex = /^(?=.{8,12}$)(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])/g
  return regrex.test(value)
}
...
...
...
 validations: {
    email: {
      required,
      email
    },
    password: {
      required,
      passwordValidate  //我設置的客製化驗證規則
    } 
  },

專案預覽

完整程式碼

請參考這支gist