## 綜述
>名稱：vee-validate
>用途：簡單的 Vue.js 表單驗證插件
>官網：[地址](http://vee-validate.logaretm.com/)
>github:[地址](https://github.com/baianat/vee-validate)
## 安裝
### 單頁安裝
~~~
npm install vee-validate --save
~~~
### 瀏覽器安裝
~~~
<!-- unpkg -->
<script src="https://unpkg.com/vee-validate@2.0.0-rc.7"></script>
~~~
## 引入項目
### 單頁引入
~~~
import Vue from 'vue';
import VeeValidate from 'vee-validate';
Vue.use(VeeValidate);
~~~
### 瀏覽器引入
~~~
<script src="path/to/vue.js"></script>
<script src="https://unpkg.com/vee-validate@2.0.0-rc.7"></script>
<script>
Vue.use(VeeValidate); // good to go.
</script>
~~~
## 基礎使用
~~~
<div class="column is-12">
<label class="label" for="email">Email</label>
<p :class="{ 'control': true }">
<input v-validate="'required|email'" :class="{'input': true, 'is-danger': errors.has('email') }" name="email" type="text" placeholder="Email">
<span v-show="errors.has('email')" class="help is-danger">{{ errors.first('email') }}</span>
</p>
</div>
~~~
### 代碼解析
* * * * *
> v-validate="'required|email'"
> v-validate 是由該插件提供的指令 作用于html上
> "'required|email'" 字段驗證的規則，注意雙引號之內必須有單引號，多個規則之間用|連接
> errors.has('email') 判斷emai字段值是否驗證通過 email內容指向input的name屬性 必須設置成一樣 這意味著要用該插件，input上的name屬性必須設置
> errors.first('email') email字段驗證不通過時顯示相關聯的提示信息
### 驗證規則
[地址](http://vee-validate.logaretm.com/validation.html#available-rules)
## 進一步學習
### 本地化
使用本地化功能可以讓錯誤提示換成中文
#### 單頁中使用
#### 瀏覽器中使用
~~~
var dict = {
zh_CN: {
messages: {
required: function(field){
return '請輸入' + field ;
},
confirmed: function(field) {
return '兩次輸入的密碼不一致';
}
},
attributes: {
OldPassword: '舊密碼',
NewPassword: '新密碼',
ConfirmNewPassword: '確認密碼',
}
}
};
VeeValidate.Validator.localize('zh_CN', dict.zh_CN);
Vue.use(VeeValidate);
var app = new Vue({
// 省略
});
~~~
#### 代碼解析
* * * * *
> VeeValidate（瀏覽器引入js后建立了一個全局對象）
> dict 翻譯的內容，其中attributes對象表示字段，messages對象表示提示信息
#### [本地化進一步參考](http://vee-validate.logaretm.com/localization.html#translation)
### 常用方法
#### 出錯渲染
* * * * *
字段驗證不通過時渲染提示信息時使用
>errors.first('field') 顯示字段field的第一個出錯信息
>errors.collect('field') 顯示字段field的所有出錯信息
>errors.has('field') 判斷fileds字段是否檢驗有誤
>erros.all() 顯示所有的出錯信息
>errors.any() 判斷是否有錯誤
#### 手動檢驗
* * * * *
常用于數據提交（寫在vue的方法內部）
>this.$validator.validate('field'); 校驗單個字段
>this.$validator.validateAll(); 表單整體校驗
代碼片段
~~~
this.$validator.validateAll().then(function(result) {
if (result) {
//成功操作
} else {
// 失敗操作
}
})
~~~
#### 檢驗信息清除
* * * * *
常用于校驗成功后清除錯誤的提示信息
> this.errors.clear();
#### [API進一步學習](http://vee-validate.logaretm.com/api.html#directive)
* * * * *
## 參考文檔
>官網:[地址](https://github.com/baianat/vee-validate)
>他人項目: [Vue 全家桶 + 前端實現登錄攔截、登出、校驗、購物車等功能](https://github.com/G-Bruin/vue-vuex-VeeValidate-vueResource-github)
