JS作品實戰-Week5-插件

使用套件完成表單驗證功能(學習筆記)

Chun

5 min readAug 10, 2020

本週重點

使用套件完成表單驗證功能
串接前台 API 完成購物車功能

使用者故事

串接 API 並可以呈現產品列表、加入購物車、購物車列表功能（本作業僅需要使用前台 API）
表單送出前進行表單驗證（必要完成），驗證內容包含：
姓名：必填
Email：須符合格式
電話：必填，超過 8 碼，input type 為 tel
地址：必填
付款方式：WebATM、ATM、Barcode、Credit、ApplePay、GooglePay
留言：非必填

驗證套件

VeeValiadation 建議直接載入包含驗證功能的 full 版本。

單一表單(input) 驗證

載入 full 版本的 cdn

<script src="https://cdnjs.cloudflare.com/ajax/libs/vee-validate/3.3.0/vee-validate.full.min.js"></script>

2. 註冊全域的表單驗證元件

Vue.component('ValidationProvider', VeeValidate.ValidationProvider);

3. 建立 validation-provider 元件

rules：驗證的規則（rules="required|email" 注意|前後不可空白）
v-slot：回傳的內容（v-slot="{ errors }" 顯示錯誤的訊息）又稱為插槽

<validation-provider rules="required|email" v-slot="{ errors }">
  <!-- 輸入框 -->
  <label for="email">Email</label>
  <input id="email" type="email" name="email" v-model="email"
      class="form-control">
  <!-- 錯誤訊息 -->
  <span>{{ errors[0] }}</span>
</validation-provider>

4. 加入 Bootstrap 樣式

JavaScript// Class 設定檔案
VeeValidate.configure({
  classes: {
    valid: 'is-valid',
    invalid: 'is-invalid',
  }
});

HTML<validation-provider rules="required|email" v-slot="{ errors, classes }">
  <!-- 輸入框 -->
  <label for="email">Email</label>
  <input id="email" type="email" name="email" v-model="email"
    class="form-control" :class="classes">
  <!-- 錯誤訊息 -->
  <span class="invalid-feedback">{{ errors[0] }}</span>
</validation-provider>

5. 增加多國語系（語系檔案）

這裡示範增加中文語系：下載 zh_TW.json檔案後，並使用 export default 匯出檔案。

export default {
  "code": "zh_TW",
  "messages": {
    "alpha": "{_field_} 須以英文組成",
    ...
  }
}

使用 import 匯入檔案，並加入設定檔

// 匯入語系檔案
import zh_TW from './zh_TW.js';

// 加入至 VeeValidate 的設定檔案
VeeValidate.localize('tw', zh_TW);

注意 type=”module” 才能使用 import 匯入

完整表單驗證

註冊全域元件

// 將 VeeValidate 完整表單 驗證工具載入 作為全域註冊
Vue.component('ValidationObserver', VeeValidate.ValidationObserver);

2. 建立 validation-observer 元件

<validation-observer v-slot="{ invalid }"></validation-observer>

3. 使用 form submit

<!-- validation-observer 驗證整體表單 -->
<validation-observer v-slot="{ invalid }">
  <!-- 表單送出改為使用 form submit 的方法 -->
  <form @submit.prevent="submitForm">   // prevent 防止預設行為
    <validation-provider rules="required|email" class="form-group" tag="div" v-slot="{ errors, classes, passed }">
      ...
    </validation-provider>
    <!-- 送出表單使用 submit 的方法，如果驗證未通過則 disabled 該按鈕 -->
    <button type="submit" class="btn btn-primary" :disabled="invalid">送出表單</button>
  </form>
</validation-observer>