好用的表單驗證工具 vuelidate

Vue validation(表單驗證)--vuelidate

表單是用戶那里收集的數據的工具。如果它沒有收集到你需要的數據，或者收集到的數據不對，那么你的表單就沒有達到它的目的。這就是為什么我們需要表單驗證。

1.需要驗證的問題

1. 必要的信息不能讓用戶提交空信息
2. 雖然不能保證用戶提交的信息100%正確，但至少提交信息的格式要保證正確
3. 通過表單驗證控制一些元素的行為，比如信息不正確，提交按鈕的響應

2.Vuelidate

雖然可以從頭開始編寫所有表單驗證，但已經有一些高質量的庫可以幫助解決這個問題。這里我們要介紹的library是Vuelidate，Vuelidate是一個流行的輕量級驗證庫，由PawełGrabarz和Damian Dulisz創建，Damian Dulisz是Vue核心團隊的成員。它也相當靈活，可以隨着您的應用程序規模擴大，並且其驗證需求也在增長。

首先我們來安裝(Vuelidate)

1$ npm install vuelidate -S

安裝好了Vuelidate，我們需要在main.js中引入它

1import 'Vuelidate' from 'Vuelidate'
2Vue.use(Vuelidate)

現在我們可以在我們的spa中全局使用Vuelidate。

 1// demo.vue
 2<template>
 3    <div>
 4        <input type="email" v-model="email"/>
 5        <button type="submit">提交</button>
 6    </div>
 7</template>
 8
 9<script>
10    import { required, email } from 'vuelidate/lib/validators'
11    export default {
12        data() {
13            return {
14                email: null
15            }
16        },
17        validations: {
18            email: {
19                required,
20                email
21            }
22        }
23    }
24</script>

demo中，我們將向組件添加一個validations選項。這個選項不是Vuelidate提供給我們的；它只是我們添加的一個選項,Vuelidate可以利用它。

在validations選項中，我們為data中的react數據email添加一個對象，它被template中的input元素綁定。

其次我們將從Vuelidate導入類似'required'，'email'這樣的規則。這些規則是內置的Vuelidate驗證器。詳見以下列表：

規則	參數	描述
required	Boolean	需要非空數據。檢查空數組和僅包含空格的字符串。
minLength	最小長度	要求輸入具有最小指定長度（包括首尾）。與數組一起使用。
maxLength	最長長度	要求輸入具有最大的指定長度（包括該長度）。與數組一起使用。
between	最小，最大	檢查數字或日期是否在指定范圍內。最小值和最大值都包括在內。
alpha	Boolean	僅接受字母字符。
alphaNum	Boolean	僅接受字母數字。
numeric	Boolean	僅接受數字。
integer	Boolean	接受正負整數。
decimal	Boolean	接受正負十進制數。
email	Boolean	接受有效的電子郵件地址。請記住，您仍然必須在服務器上仔細驗證它，因為如果不發送驗證電子郵件就無法確定該地址是否真實。
ipAddress	Boolean	接受點分十進制表示法的有效IPv4地址，例如127.0.0.1。
minValue	分	要求輸入具有指定的最小數值或日期。
maxValue	最大值	要求輸入具有指定的最大數值或日期。
macAddress	分隔符=':'	接受有效的MAC地址，例如00:ff:11:22:33:44:55。不要忘記調用它macAddress()，因為它具有可選參數。您可以指定自己的分隔符，而不是':'。
url	Boolean	接受有效的url地址。
or	||	或
and	&&	與
not	!	非
withParams	$params	不是真正的驗證器，而是驗證器修飾符。將$params對象添加到提供的驗證器中。可以用於驗證功能，甚至可以用於整個嵌套字段驗證對象。對於創建自己的自定義驗證器很有用。
requiredIf	定位器*	僅在提供的屬性為true時才進行驗證。
requiredUnless	定位器*	僅在提供的屬性為false時才進行驗證。
sameAs	定位器*	檢查給定屬性是否相等。

完成這些步驟后，Vuelidate會自動為組件添加了一個名為$v的計算屬性。它包含了整個表單驗證的當前狀態。我們也可以單獨讀取email對象，它包含了email驗證的狀態。

在組件中我們可以直接使用this.$v獲取到整個對象，並通過其中的狀態做出我們所需要的邏。例如：

1$v.email.$invalid = true(說明email這項表單沒有通過驗證)
2$v.email.required = false(說明email為空)
3$v.email.required = false && $v.email.email = false
4(說明email格式錯誤)

當表單出現問題時，我們可以有效地向用戶顯示錯誤。但是進入頁面就自動顯示錯誤消息並不是很好的用戶體驗。Vuelidate提供了許多方法與屬性可供使用，更多好用的屬性可以自行去查文檔，例如：

1$v.email.$dirty// 用戶是否有觸發過表單
2$v.email.$error// 用戶真實錯誤$dirty + $invalid
3$v.email.$touch()// 用來改變$dirty值

$v中同時包含了表單的全局屬性，與單個表單驗證屬性類似，可用於編寫表單提交邏輯，即：

1$v.$dirty
2$v.$error
3$v.$anyDirty
4$v.$anyError
5$v.$invalid

$v.$invalid將在任何與我們的驗證相關的錯誤發生時為真。您可以在提交表單之前檢查$v.$invalid狀態，從而輕松完成驗證表單操作。注意：在那之前我們調用$v.$touch()，這將更改所有表單驗證的$v.$dirty狀態，導致所有$invalid字段的$error為true。

---