2020-02-12

六角鼠年全馬挑戰賽

7 分鐘閱讀文 (大約 1028 個字)

Vue - Vee Validate 3 操作方法

目標

因為六角的作業需要使用到Vee validate這個套件，可是課程內使用的第二版和目前第三版已經有所差距了，爬文也找不到相關資料，所以按照官網教學自己做了一次。

使用步驟

1. 安裝

安裝 npm install --save vee-validate

2. import進檔案中

import有兩種方法，一種是在main.js中全局import，如此一來所有元件都能使用，還有一種是在要使用的元件中局部import

2.1 全局import


//位置:main.js (你的vue專案中的進入點)
//引入
import { ValidationProvider } from 'vee-validate';
//啟用
Vue.component('ValidationProvider', ValidationProvider);

全局引用後不用在元件中再次引用就可以直接使用了

2.2 局部引用

//位置：你在使用的元件名稱.vue

import { ValidationProvider } from 'vee-validate';

export default {
//區域元件註冊
  components: {
    ValidationProvider
  }
};

3.使用vee validate的標籤validationprovider

就如同vue註冊後的元件一樣，元件的名稱就會是html標籤，validation provider就是我們要使用的標籤

    <validation-provider rules='email' v-slot='{errors}'>
        包住
    <input type="text" v-model='form.user.email'>
    <span>{{errors[0]}}</span> //若輸入有誤時這裡將會跳出錯誤提示
        包住
</validation-provider> HTML無法偵測大小寫, 所以使用kebab寫法

使用validation-provider包住要驗證的input，按照需求綁定V-model，官方建議要有v-model讓套件能抓到要驗證的資料，但是你不想使用的話，也能使用prop方式 :value = value

到這時架構就完成了，不過我們還要綁定一些驗證規則(rule)，讓使用者輸入正確的資料。

4.增加驗證規則(rule)

驗證規則就是你要規定這些input中必須輸入什麼樣的訊息，例如要填email的欄位就不能讓使用者填電話號碼。Vee validate其實已經內建好許多規則，但我們可以先來看看怎麼自訂規則。

（以下為全局註冊的做法，若你是在元件內註冊，你可以將這些操作換到該元件中）

4.1 引入extend

1 2	//位置:main.js import { extend } from 'vee-validate';

#####　4.2 新增規則
我們新增一個規則來驗證使用者是否輸入正數 (positive)

//位置:main.js
         //規則名稱  //使用者輸入的值
extend('positive', value => {
  //驗證條件: 符合的話為true，不作為
    if(value >= 0){
    return true;
  };
//若是使用者輸入零或是負數導致驗證條件為false, 跳出下列訊息
//錯誤訊息: 
    return '必須大於零';
});

4.3 綁定規則

在剛剛的html標籤上加上rules

link

<validation-provider rules='positive' v-slot='{errors}'>
    <input type="text" v-model='form.user.email'>
    錯誤訊息
    <span>{{errors[0]}}</span>
</validation-provider>

註：想要套用多種規則時
在這裡我們新增一個規則，規定使用者只能輸入偶數

extend('positive', value => {
  if(value >= 0){
    return true;
  };
  return '必須大於零';
});

extend('even', value => {
  if(value %2 ===0){
    return true;
  };
  return '必須是偶數';
});

html綁定方法
只要在剛剛的positive規則旁邊，用一條直線再加上新的規則名稱就好

<validation-provider rules='positive|even' v-slot='{errors}'>
    <input type="text" v-model='form.user.email'>
    <span>{{errors[0]}}</span>
</validation-provider>

此時套用的兩個規則都會生效。

5. 引用vee validate中內建的規則－以email為例

veevalidate中內建有許多規則，你可以到node_modules (套件安裝的地方) => vee validate => dist => rules中找到
這裡我們以email為例

（以下仍以全域註冊的方式進行）

5.1 在main.js中引入內建的規則

因為這裡只需要email，所以引入這個就好

1 2	//位置:main.js import { email } from 'vee-validate/dist/rules';

5.2 建立規則

有兩種做法，分為預設訊息與自訂訊息

5.2.1 若你不需要自訂訊息的話，此時會使用預設的訊息

1
2
3


//  註冊的名稱  該規則
extend('email', email);

5.2.1 若你想要跳出自訂的錯誤提示

    //註冊的名稱
extend('email', {
  ...email,　
  message: '郵件地址不正確'　//自訂的訊息
});

完成了！

這篇文章使用了官方的教學文件，想要知道更深入的內容請到這邊

# VeeValidate3, Vue, 六角鼠年全馬挑戰賽