# Vue 表單驗證套件: vee-validate (ver. 2)
## 安裝

     npm install vee-validate --save

再於 main.js (Vue cli 中的 Vue 注入點)，將這個套件匯入專案中：

@import VeeValidate* from 'vee-validate' 
//因為是在node module 中的套件，所以只需要套件名稱就可以了

Vue.use(VeeValidate);
//名稱對應到上述 *，也就是我們為匯入的套件賦予的名稱

## 使用到 input
* 這個套件是以 input 標籤裡的 name 屬性裡的值做對應; 並使用 v-validate 這個指令即可。
有這個 name 的值，vee-validate 才知道要去哪個 input 做驗證。

    <input name="email">

    <span v-if="errors.has('email')"></span>

- errors.has('email')：
- 判斷含　name="email" 這個 input 是否有錯誤。
- 回傳 true / false。有錯誤回傳 true，否則 false。

### 針對常見表單輸入的回饋
- errors.first('email') 驗證 email 時，回傳相關的驗證錯誤訊息。

這部分有點像是針對`errors` 給我們的更詳細的查閱。

### vee-validate 的運作方式
vee-validate 透過 `v-validate` 和 `name` 做表單元素的分組和驗證；然後再由 `error` 這個物件告知使用者每一個綁定 v-validate 的 input 於驗證後產生的相關訊息。errors.has() 讓我們查閱 vee-validate 驗證後錯誤的 input 有哪些。例如， `errors.has('email')` 就是在查閱這個驗證錯誤的表單有沒有包含 email 這一項。

由這樣的使用方式可以得知，vee-validate 的 errors 運作方式有點像是 JS 的事件綁定。我們在事件綁定中，在 event handler 裡代入一個 `e 或 event` 的參數，就可以查閱這個事件被觸發時的各種相關訊息。

這邊也是相當類似的。透過 errors 這個物件，我們也可以查閱 vee-validate 在做過驗證之後，產生和驗證錯誤的表單的相關訊息。

**而，`errors.first('')` 則是這個套件提供給我們使用的客戶端回饋訊息。(也就是在表單驗證錯誤時，給使用者看的訊息）**

是給使用者的回饋訊息，以 Vue 的 `{{ }}` 方法顯示到網頁上。

    <input name='email' v-validate="'required'">
    <span v-if="error.has('email')">{{ errors.first('email') }}</span>

以 email 為例，使用`first()` 這個方法，vee-validate 就會針對 email 做驗證。除了一般的告知使用者 email 為必填，也可以回饋詳細的錯誤訊息，例如，email 的格式不對等等。

**PS. 在 errors 中代入的參數都是 input 中 name 標籤裡的值，這部分要特別注意。**

## vee-validate 小結
1. input 需要有 name 做為表單的驗證依據，name、email、tel 等等。
3. v-validate ="'required'" (字串裡面有字串) 標記為需要驗證的表單內容
4. errors.has('...') 驗證這個表單是否錯誤，錯誤回傳 true
5. errors.first('...') 為套件給我們的回饋訊息，以 `{{ }}` 的方式渲染給使用者看

## requried 屬性
在上述我們只是做好表單的驗證功能，但是並不會阻止瀏覽器送出表單。input 只認得 HTML 標籤的 required 屬性：

    <input...required>

如果要做到 submit 之前，做好套件的驗證，再交由瀏覽器提出表單，就需要從 method 做處理，讓表單驗證成功之後，再向遠端資料庫送出表單內容。這時候就不需要使用　required 標籤，就可以讓顧客再填寫必須欄位後，再送出表單了。

this.$validator.validate().then(valid => {
            // 提交表單的 ajax 行為
      });