安裝與設定

Vue 本身對於 Form Validation 部分支援有限,必須使用 VeeValidate package 才堪稱好用。

Version


Vue 2.5.17
VeeValidate 2.1.2

Introduction


1
$ yarn add vee-validate

basic000

  1. 安裝完後在 package.json 會看到 vee-validate

demo.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
<div>
<div>
<input v-validate="'required|email'" name="email" type="text">
</div>
<div>
<span>{{ errors.first('email') }}</span>
</div>
</div>
</template>

<script>
import Vue from 'vue';
import VeeValidate from 'vee-validate';

Vue.use(VeeValidate);

export default {
name: 'basic-example',
};
</script>

第 13 行

1
2
import Vue from 'vue';
import VeeValidate from 'vee-validate';

VueVeeValidate import 進來。

16 行

1
Vue.use(VeeValidate);

VeeValidate 傳進 Vue.use()

第 4 行

1
<input v-validate="'required|email'" name="email" type="text">

<input> 加上 v-validate directive,以 pipe 方式描述要驗證方式。

required|email 表示 必填 且必須是 Email 格式。

name attribute 為必須,將來會傳入 errors.first() 顯示錯誤訊息。

v-validate 的 rule 字串必須以 單引號 刮起來,否則會認為是 data binding 的 data 或 prop

第 7 行

1
<span>{{ errors.first('email') }}</span>

使用 errors.first() 顯示 第一個 錯誤訊息,傳入為 name attribute。

basic001

  1. 顯示 必填 錯誤訊息

basic002

  1. 顯示 Email 格式錯誤訊息

Conclusion


  • VeeValidate 還有更多的設定,本文先介紹最基本安裝與使用

Sample Code


完整的範例可以在我的 GitHub 上找到

Reference

VeeValidate, Getting Started

2018-11-06