開始之前先強調一下，
工具的選擇取決於使用情境，
還有個人喜好，
本篇會根據自己的使用經驗，
分享為何自己選擇 simple-vue-validator 而不是其他的套件。

如果有任何想補充和分享的歡迎下方留言。

Simple Vue Validator 簡介

Github
Document

simple-vue-validator 是一個 vue 的 validation 解決方案。

官方介紹說這是一個輕量的尚未足夠彈性的套件，而且目前好像也沒有在維護了，
github 星星數也不到兩百顆，但根據個人喜好選擇了這個套件。

簡易 validation 比較

大家可以去 awesome-vue#validation 找到許多 validation 解決方案，
這邊我個人從 13 個當中，篩選出了 3 個：

• vee-validate
• vuelidate
• simple-vue-validator

如果有更棒的套件也歡迎下方留言分享。

vee-validate

• github 約 5346 顆星星
• 功能最齊全，應有盡有，幾乎不用在自行開發
• 是透過 v-validate 指令來綁定 validation
• 基本使用方式：

<input v-validate="'required|email'" type="text" name="email">
<span v-show="errors.has('email')">{{ errors.first('email') }}</span>

vuelidate

• github 約 2905 顆星星
• 基本使用方式：

HTML:

<input v-model.trim="$v.name.$model"/>
<div v-if="!$v.name.required">Field is required</div>
<div v-if="!$v.name.minLength">Name must have at least {{$v.name.$params.minLength.min}} letters.</div>

Javascript

import { required, minLength } from 'vuelidate/lib/validators'

export default {
  data: vm =>({
    name: ''
  }),
  validations: {
    name: {
      required,
      minLength: minLength(4)
    }
  }
}

simple-vue-validator

• github 約 197 顆星星
• 基本使用方式：

HTML:

<input :class="{ error: validation.hasError('name') }" type="text" v-model="name">
<div>{{ validation.firstError('name') }}</div>

Javascript

export default {
	data: vm => ({
		name: ''
	}),
	validators: {
		name (value) {
			return Validator.value(value).required().minLength(4, 'minLength is 4')
		}
	}
}

為何選擇 simple-vue-validator?

當然上面介紹的三個 validation 都各有優點，
使用方法也只能點到為止，詳細介紹還請直接看官方範例與 API。

再分享自己喜歡 simple-vue-validator 的原因之前先問個問題：

既然已經使用了 Vuetify 這樣全能又基於 Vue 的框架，而且 Vuetify 本身也提供 form validation 的解決方案，那為何還需要其他第三方的表單驗證套件？

的確，像是用過 vueStrap, elementUI, vuetify 等框架或元件庫的人，應該都了解這些庫都有提供表單驗證的解法。

不過，通常這些解法僅限於這些庫提供的表單輸入元件，
假設今天有一個特殊的需求，
需要開發一個客製化的表單輸入元件，
你就會發現很難優雅的將表單驗證這種浪費前端工程師時間的事情輕鬆解決，
我會開始用一些骯髒的手法來完成我想要的驗證。

不僅是為了節省時間，也是為了方便管理與擴充和重用程式碼。

這些第三方表單驗證的套件都提供類似的概念：

• 可客製化定義表單驗證的規則
• 可以跨欄位驗證(例如：密碼和確認密碼是兩個必須相等才算驗證成功的相依關係)
• 提供非同步的驗證解決方案
• 可驗證客製化的元件
• 可驗證動態新增欄位的表單或多個表單

以上這些都是我認為三個表單驗證套件都擁有的優點。

另外，

vee-validate 和 vuelidate 還提供 i18n 多國語系的解決方案，而 simple-vue-validator 則需要自己對多國語系訊息做處理。

說到這真的是沒什麼理由選一個星星數量又少又沒在維護的套件啊。

但 simple-vue-validator 個人喜歡的點在於：

• 最輕量
• 即使功能不如其他套件完善，但易擴充且保留彈性，原始碼沒幾行就能看完。
• API 方便好用又簡單
• 文件範例清楚

基本上除了多國語系要額外處理，
還沒遇過 simple-vue-validator 無法輕鬆解決的表單驗證。

再來講一些實際的原因和小細節

為何個人不選擇 vee-validate？

因為是透過 v-validate 的指令將驗證邏輯寫在 template 當中，
就等於驗證邏輯的各個規則被放在 template 中，
假設今天一個驗證有多個規則，例如像是下面這樣：

v-validate="required|min_value:1000|max_value:9000"

這樣將驗證邏輯寫在 template 中，個人是覺得很惱人，
一個必填且範圍在 1000-9000 的數字，
這個邏輯個人期待可放在 js 中，並重複使用。

而這點 vuelidate 和 simple-vue-validator 可以這麼做。

為何個人不選擇 vuelidate？

vuelidate 的確做到了將驗證邏輯放在 js 中，
但顯示驗證的錯誤訊息，卻要全部寫在 template 中，例如下面這樣：

<input v-model.trim="$v.name.$model"/>
<div v-if="!$v.name.required">Field is required</div>
<div v-if="!$v.name.minLength">Name must have at least {{$v.name.$params.minLength.min}} letters.</div>
<div v-if="!$v.name.maxLength">Name must have at least {{$v.name.$params.minLength.min}} letters.</div>

這邊有三個規則就有三行錯誤訊息，
這樣表單欄位一多下去光是顯示錯誤訊息，就讓 input 輸入框消失在茫茫 template 當中了。

而這點 vee-validate 和 simple-vue-validator 的錯誤訊息在 template 中都只有一行，例如下面這樣：

vee-validate:

<span v-show="errors.has('email')">{{ errors.first('email') }}</span>

simple-vue-validator:

<div>{{ validation.firstError('name') }}</div>

結合兩者優點，取交集於 simple-vue-validator

simple-vue-validator 可以：

• 使驗證邏輯在 js 當中
• 顯示錯誤訊息只要一行

這兩點能保持 template 乾淨，專注於切版。

最後

如果看完了我的推薦，你也認為 simple-vue-validator 不錯，
那就去 Github 給顆星星吧，
這麼讚的套件怎麼才 200 顆星星，真是匪夷所思。

本篇分享了個人選用套件的看法，
很期待可以聽到其他人分享其他的使用經驗，
下篇會利用 simple-vue-validator 來實際開發一個元件(FormAddPost)，
並結合之前的篇章開發的元件:

• TheTags
• TheMarkdown
• Vue-codemirror
• PostPreview
• 以及其他 vuetify 提供的元件

明天見。