Rule 也能結合 Data Binding

Data Binding 為 Vue 的招牌之一,既然如此,VeeValidate 也能搭配 Data Binding 一起運作嗎 ?

Version


Vue 2.5.17
VeeValidate 2.1.2

Data Binding to String


demo.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<template>
<div>
<div>
<input v-validate="rules" 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);

/** data */
const data = function() {
return {
rules: 'required|email',
};
};

export default {
name: 'demo',
data,
};
</script>

18 行

1
2
3
4
5
const data = function() {
return {
rules: 'required|email',
};
};

將 rule string 放在 Vue 的 data 內。

第 4 行

1
<input v-validate="rules" name="email" type="text">

將 VeeValidate 的 v-validate directive 綁定到 datarules

Data Binding to Object


demo.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<template>
<div>
<div>
<input v-validate="rules" 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);

/** data */
const data = function() {
return {
rules: {
required: true,
email: true,
},
};
};

export default {
name: 'demo',
data,
};
</script>

19 行

1
2
3
4
5
6
7
8
const data = function() {
return {
rules: {
required: true,
email: true,
},
};
};

rules 改用 object,每個 VeeValidate 的 rule 為 key,若為 true 則啟用 rule,若為 false 則補啟用。

string 或 object 寫法都是 VeeValidate 合法方式,若要動態 toggle rule,則 object 較方便

databinding000

Conclusion


  • Vee Validate 不再只是寫死在 HTML,也可以寫在 ECMAScript,再透過 Vue 的 Data Binding 綁定即可

Sample Code


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

Reference


VeeValidate, Syntax

2018-11-08