開始之前先強調一下,
工具的選擇取決於使用情境,
還有個人喜好,
本篇會根據自己的使用經驗,
分享為何自己選擇 simple-vue-validator 而不是其他的套件。
如果有任何想補充和分享的歡迎下方留言。
simple-vue-validator 是一個 vue 的 validation 解決方案。
官方介紹說這是一個輕量的尚未足夠彈性的套件,而且目前好像也沒有在維護了,
github 星星數也不到兩百顆,但根據個人喜好選擇了這個套件。
大家可以去 awesome-vue#validation 找到許多 validation 解決方案,
這邊我個人從 13 個當中,篩選出了 3 個:
如果有更棒的套件也歡迎下方留言分享。
<input v-validate="'required|email'" type="text" name="email">
<span v-show="errors.has('email')">{{ errors.first('email') }}</span>
<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>
import { required, minLength } from 'vuelidate/lib/validators'
export default {
data: vm =>({
name: ''
}),
validations: {
name: {
required,
minLength: minLength(4)
}
}
}
<input :class="{ error: validation.hasError('name') }" type="text" v-model="name">
<div>{{ validation.firstError('name') }}</div>
export default {
data: vm => ({
name: ''
}),
validators: {
name (value) {
return Validator.value(value).required().minLength(4, 'minLength is 4')
}
}
}
當然上面介紹的三個 validation 都各有優點,
使用方法也只能點到為止,詳細介紹還請直接看官方範例與 API。
再分享自己喜歡 simple-vue-validator 的原因之前先問個問題:
既然已經使用了 Vuetify 這樣全能又基於 Vue 的框架,而且 Vuetify 本身也提供 form validation 的解決方案,那為何還需要其他第三方的表單驗證套件?
的確,像是用過 vueStrap, elementUI, vuetify 等框架或元件庫的人,應該都了解這些庫都有提供表單驗證的解法。
不過,通常這些解法僅限於這些庫提供的表單輸入元件,
假設今天有一個特殊的需求,
需要開發一個客製化的表單輸入元件,
你就會發現很難優雅的將表單驗證這種浪費前端工程師時間的事情輕鬆解決,
我會開始用一些骯髒的手法來完成我想要的驗證。
不僅是為了節省時間,也是為了方便管理與擴充和重用程式碼。
這些第三方表單驗證的套件都提供類似的概念:
以上這些都是我認為三個表單驗證套件都擁有的優點。
另外,
vee-validate 和 vuelidate 還提供 i18n 多國語系的解決方案,而 simple-vue-validator 則需要自己對多國語系訊息做處理。
說到這真的是沒什麼理由選一個星星數量又少又沒在維護的套件啊。
但 simple-vue-validator 個人喜歡的點在於:
基本上除了多國語系要額外處理,
還沒遇過 simple-vue-validator 無法輕鬆解決的表單驗證。
再來講一些實際的原因和小細節
因為是透過 v-validate 的指令將驗證邏輯寫在 template 當中,
就等於驗證邏輯的各個規則被放在 template 中,
假設今天一個驗證有多個規則,例如像是下面這樣:
v-validate="required|min_value:1000|max_value:9000"
這樣將驗證邏輯寫在 template 中,個人是覺得很惱人,
一個必填且範圍在 1000-9000 的數字,
這個邏輯個人期待可放在 js 中,並重複使用。
而這點 vuelidate 和 simple-vue-validator 可以這麼做。
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 可以:
這兩點能保持 template 乾淨,專注於切版。
如果看完了我的推薦,你也認為 simple-vue-validator 不錯,
那就去 Github 給顆星星吧,
這麼讚的套件怎麼才 200 顆星星,真是匪夷所思。
本篇分享了個人選用套件的看法,
很期待可以聽到其他人分享其他的使用經驗,
下篇會利用 simple-vue-validator 來實際開發一個元件(FormAddPost),
並結合之前的篇章開發的元件:
明天見。