如何將 VeeValidate 整合進大型專案架構 ?
摘要：
VeeValidate 除了內建很多 Validation Rule，還可以自訂 語系 ，自訂 訊息 ，自訂 驗證規則 ，但要如何這些整合進大型專案架構呢 ?
Version
Vue 2.5.17
VeeValidate 2.1.2
Directory
...
VeeValidate 除了內建很多 Validation Rule，還可以自訂 語系 ，自訂 訊息 ，自訂 驗證規則 ，但要如何這些整合進大型專案架構呢 ?
Version
Vue 2.5.17
VeeValidate 2.1.2
Directory
- 在
src下建立validators目錄，專門存放 VeeValidate 所使用的自訂 validator - 在
validators目錄下建立dictionaries目錄，專門放置各種自訂訊息檔 - 在
validators目錄下建立rules目錄，專門放置各種自訂驗證規則檔
Component
demo.vue
<template>
<div>
<div>
<input v-validate="'required|email'" name="email" type="text">
</div>
<div>
<span>{{ errors.first('email') }}</span>
</div>
<div>
<input v-validate="'required|custom-email'" name="custom-email" type="text">
</div>
<div>
<span>{{ errors.first('custom-email') }}</span>
</div>
</div>
</template>
<script>
import demoValidator from '../validators/demo.validator';
demoValidator();
export default {
name: 'demo',
};
</script>
19 行
import demoValidator from '../validators/demo.validator'; demoValidator();
原本要在 demo component 所跑的 VeeValidate，完全整合到 demoValidator() 。
demo.validator.js
import Vue from 'vue';
import VeeValidate, { Validator } from 'vee-validate';
import zh_TW from 'vee-validate/dist/locale/zh_TW';
import { requiredDictionary } from './dictionaries/required.dictionary';
import { emailDictionary } from './dictionaries/email.dictionary';
import { customEmailRule } from './rules/custom-email.rule';
export default () => {
Vue.use(VeeValidate);
Validator.localize('zh_TW', zh_TW);
/** Dictionary */
const dictionary = {
zh_TW: {
requiredDictionary,
emailDictionary,
},
};
Validator.localize(dictionary);
/** Custom Rule */
Validator.extend('custom-email', customEmailRule);
};
第 4 行
import { requiredDictionary } from './dictionaries/required.dictionary';
import { emailDictionary } from './dictionaries/email.dictionary';
將 dictionaries 目錄下所需要的 自訂訊息檔 import 進來。
第 6 行
import { customEmailRule } from './rules/custom-email.rule';
將 rules 目錄下所需要的 自訂驗證規則檔 import 進來。
第 9 行
Vue.use(VeeValidate);
Validator.localize('zh_TW', zh_TW);
使用 VeeValidate，並且設定 語系 。
12 行
/** Dictionary */
const dictionary = {
zh_TW: {
requiredDictionary,
emailDictionary,
},
};
Validator.localize(dictionary);
架構出 component 所需要的 自訂訊息檔 。
22 行
/** Custom Rule */
Validator.extend('custom-email', customEmailRule);
架構出 component 所需要的 自訂驗證規則檔 。
Dictionary
email.dictionary.js
export const emailDictionary = 'Email 格式錯誤';
定義 email rule 的自訂訊息。
Rule
required.dictionary.js
export const requiredDictionary = field => `請輸入 ${field}`;
定義 required rule 的自訂訊息。
custom-email.rule.js
const getMessage = field => `${field} 格式不正確`;
const validate = value => {
const regex = /^\w+\.*\w+@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z]+$/;
return regex.test(value);
};
export const customEmailRule = {
getMessage,
validate,
};
設定 customEmail 的自訂驗證規則。
Conclusion
- 由於將
dictionary與rule獨立出來，component 的 validator 可以自由組合所需要的dictionary與rule，非常靈活 - 當然可以將 VeeValidate 所有的
自訂訊息檔與自訂驗證規則檔統一寫在一起，但這樣子Webpack 的 Tree Shaking 無法發揮，比較好的方式是每個 component 有自己的 validator，再由 validator 架構出所需要的自訂訊息檔與自訂驗證規則檔