筆記: VeeValidate 表單驗證與 BootstrapVue 框架的結合

我是做到卡住看下面的參考資料學會的，但前半段 npm 是自己上兩邊官網 import 跟 use

首先是 npm 部分， VSCode 按 Ctrl+` 打開終端機輸入：

npm install vee-validate --save

npm install vue bootstrap-vue bootstrap

再來是在main.js import

import Vue from 'vue'

import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'

Vue.use(BootstrapVue)

Vue.use(IconsPlugin)

CSS部份我採用自訂的SCSS，所以在 APP.VUE

@import '/assets/css/all.scss';

//下面是google字型

@import url('https://fonts.googleapis.com/css2?family=Coiny&family=Noto+Sans+TC:wght@100;400;900&display=swap');

VeeValidate官方推薦採用自訂規則只導入用到的規則，不過第一次用就把預設的規則都載入

import { ValidationObserver, ValidationProvider, extend } from 'vee-validate';

import * as rules from 'vee-validate/dist/rules';

// 用這個迴圈載入所有的規則

Object.keys(rules).forEach(rule => {

extend(rule, rules[rule]);

});

Vue.component('ValidationObserver', ValidationObserver);

Vue.component('ValidationProvider', ValidationProvider);

Vue.config.productionTip = false;

元件裝好之後接下來就是重頭戲的表單設置部分：

slot-scope="{ validate }" 要放在 <b-form>

slot-scope="{ valid, errors}"放在 <b-form-group> ， label可以省一行跟設定基於 Bootstrap 的格線

系統，在需要驗證的 input 加上 :state=" errors[0] ? false : ( valid?true:null ) "

<b-form-invalid-feedback> 是驗證失敗時出現的文字， errors 的內容要在 node_modules\vee-

validate\dist\locale\zh_TW.json 做修改，改哪個 json 檔案由想使用的語言決定，更改語系請看

VeeValidate 官網，此處篇幅有限暫且擱下。

ValidationObserver ，是 VeeValidate 的特化表單功能，包在整個 <b-form> 外面，可以針對送出

表單按鈕做控制跟驗證或二次驗證...等等

ValidationProvider，放在 <b-form-group> 外面就好，會產生一個 <span> ，亂丟會導致畫面不見。

後半截的 Code 主要就是關一關，還有送出表單驗證功能與串接API的結合寫法。

頁面的部份如上，下面是 <script> 內容：

對於表單驗證的部分完全不用寫多餘的方法，下面參考資料步驟詳細標示清楚，我照著做才沒冒一堆錯誤，不然對這個套件的原理還有很多不熟的地方。

參考資料：https://www.positronx.io/vue-js-veevalidate-bootstrapvue-form-validation-example/

筆記