如何將 VeeValidate 整合進大型專案架構 ?

栏目: JavaScript · 发布时间: 7年前

内容简介：VeeValidate 除了內建很多 Validation Rule，還可以自訂Vue 2.5.17VeeValidate 2.1.2

VeeValidate 除了內建很多 Validation Rule，還可以自訂 語系 ，自訂 訊息 ，自訂 驗證規則 ，但要如何這些整合進大型專案架構呢 ?

Version

VeeValidate 2.1.2

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 架構出所需要的 自訂訊息檔 與 自訂驗證規則檔

Sample Code

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

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

十亿美金的教训

林军唐宏梅 / 浙江大学出版社 / 2011-5 / 39.00元

《十亿美金的教训》内容简介：创业者个人能力欠缺、团队涣散、经营方向把握不当、资金动用失措以及时局不利……这其中有哪一个细节被忽视，都可能是失败的导火索！国内二十年互联网风云，有人成功，有人失败。两种结果，不同方向，却往往只是一线之隔。他们留给我们怎样的教训与启示？后来者要怎样才能跳出失败之殇？《十亿美金的教训》选取了互联网十个经典的失败案例，并深层解读这些互联网企业与创业者们从成功......一起来看看《十亿美金的教训》这本书的介绍吧!

码农工具