介紹
vee-validate是Vue.js的基於模板的驗證框架,可以驗證輸入並顯示錯誤。基於模板,只需為每個輸入值更改時指定應使用哪種驗證器。系統會在支持40多種語言環境的情況下自動生成錯誤。現成的規則很多。該插件的靈感來自PHP Framework Laravel的驗證!這個組件總結為一句話就是:在前端驗證裡面實現了 laravel 的表單驗證,這種實現是指,語法和思想的實現!
- 簡單
基於模板的驗證又易於設置
- 靈活
驗證HTML輸入和Vue組件,生成本地化錯誤,可擴展
- 可配置的
不需要麻煩的配置,都是可選的
Github地址
<code>倉庫:https://github.com/logaretm/vee-validate
文檔:https://logaretm.github.io/vee-validate//<code>
特性簡介
<code>//組件本地化
import ar from 'vee-validate/dist/locale/ar';
import VeeValidate, { Validator } from 'vee-validate';
Validator.localize('ar', ar);
Vue.use(VeeValidate);/<code>
安裝和使用
- 安裝
當然是使用我們熟悉的npm,或者yarn
<code># 使用npm安裝
npm install vee-validate --save
# 使用yarn安裝
yarn add vee-validate/<code>
- 使用
註冊ValidationProvider組件並添加所需的規則:
<code>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: ''
})
});/<code>
用ValidationProvider包住輸入:
<code><validation-provider>
{{ errors[0] }}
/<validation-provider>/<code>
下面截圖是官方結合Element和Antd的示例,感興趣的小夥伴可以直接查看官方示例,一共提供了Element UI、Vuetify、Quasar、BootstrapVue、Buefy、Antd Design的在線範例:
PS:一些高級的API文檔可以直接查看官方文檔,英文不好的小夥伴可以直接藉助瀏覽器翻譯,同樣能看懂:
總結
Vue是目前前端框架中非常火熱的框架,基於此,在Vue的基礎上誕生的框架也是豐富多彩,相信也有很多小夥伴也和我一樣比較喜愛Vue這一個框架,而且在不久的將來Vue也將發佈3.0版本,屆時將帶來更多豐富的用法,拭目以待!
閱讀更多 最美分享Coder 的文章