好用的表單驗證工具 vuelidate

表單是使用者那裡收集的資料的工具。如果它沒有收集到你需要的資料，或者收集到的資料不對，那麼你的表單就沒有達到它的目的。這就是為什麼我們需要表單驗證。

必要的資訊不能讓使用者提交空資訊

雖然不能保證使用者提交的資訊100%正確，但至少提交資訊的格式要保證正確

通過表單驗證控制一些元素的行為，比如資訊不正確，提交按鈕的響應

雖然可以從頭開始編寫所有表單驗證，但已經有一些高質量的庫可以幫助解決這個問題。這裡我們要介紹的library是vuelidate，vuelidate是乙個流行的輕量級驗證庫，由pawełgrabarz和damian dulisz建立，damian dulisz是vue核心團隊的成員。它也相當靈活，可以隨著您的應用程式規模擴大，並且其驗證需求也在增長。

首先我們來安裝(vuelidate)

1$ npm install vuelidate -s

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

1
import
'vuelidate'
from
'vuelidate'
2vue.use(vuelidate)

現在我們可以在我們的spa中全域性使用vuelidate。

1// demo.vue23 4type="email" v-model="email"/> 5type="submit">提交button> 6div> 7template>89 10import from 'vuelidate/lib/validators' 11export default 16 }, 17validations: 22 } 23 } 24script> 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()，因為它具有可選引數。您可以指定自己的分隔符，而不是':'。 urlboolean 接受有效的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。

好用的表單驗證工具 vuelidate

element 表單驗證復用工具

好用的工具

好用的工具lombok

好用的表單驗證工具 vuelidate

element 表單驗證復用工具

好用的工具

好用的工具lombok

相關推薦