介紹

vee-validate是Vue.js的基于模板的驗證框架，可以驗證輸入並顯示錯誤。基于模板，只需爲每個輸入值更改時指定應使用哪種驗證器。系統會在支持40多種語言環境的情況下自動生成錯誤。現成的規則很多。該插件的靈感來自PHP Framework Laravel的驗證！這個組件總結爲一句話就是：在前端驗證裏面實現了 laravel 的表單驗證，這種實現是指，語法和思想的實現！

• 簡單

基于模板的驗證又易于設置

• 靈活

驗證HTML輸入和Vue組件，生成本地化錯誤，可擴展

• 可配置的

不需要麻煩的配置，都是可選的

---

---

Github地址

倉庫：https://github.com/logaretm/vee-validate

文檔：https://logaretm.github.io/vee-validate/

特性簡介

基于模板的驗證既親切又易于設置。

i18n 支持，並且支持40多種語言的本地化錯誤提示

異步和自定義規則支持

使用Typescript編寫

沒有其它依賴項

//組件本地化
import ar from 'vee-validate/dist/locale/ar';
import VeeValidate, { Validator } from 'vee-validate';

Validator.localize('ar', ar);
Vue.use(VeeValidate);

安裝和使用

• 安裝

當然是使用我們熟悉的npm，或者yarn

# 使用npm安裝
npm install vee-validate --save

# 使用yarn安裝
yarn add vee-validate

• 使用

注冊ValidationProvider組件並添加所需的規則：

import { ValidationProvider, extend } from 'vee-validate';
import { required } from 'vee-validate/dist/rules';

extend('required', {
  ...required,
  message: 'This field is required'
});

new Vue({
  el: '#app',
  components: {
    ValidationProvider
  },
  data: () => ({
    value: ''
  })
});

用ValidationProvider包住輸入：

<validation-provider rules="required" v-slot="{ errors }">
  <input v-model="value" name="myinput" type="text" />
  <span>{{ errors[0] }}</span>
</validation-provider>

下面截圖是官方結合Element和Antd的示例，感興趣的小夥伴可以直接查看官方示例，一共提供了Element UI、Vuetify、Quasar、BootstrapVue、Buefy、Antd Design的在線範例：

PS：一些高級的API文檔可以直接查看官方文檔，英文不好的小夥伴可以直接借助浏覽器翻譯，同樣能看懂：

總結

Vue是目前前端框架中非常火熱的框架，基于此，在Vue的基礎上誕生的框架也是豐富多彩，相信也有很多小夥伴也和我一樣比較喜愛Vue這一個框架，而且在不久的將來Vue也將發布3.0版本，屆時將帶來更多豐富的用法，拭目以待！