如何將 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 上找到

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

查看所有标签

猜你喜欢:

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

码农书籍

JavaScript Web应用开发

[阿根廷] Nicolas Bevacqua / 安道 / 人民邮电出版社 / 2015-9 / 59.00元

本书是面向一线开发人员的一本实用教程，对最新的Web开发技术与程序进行了全面的梳理和总结，为JavaScript开发人员提供了改进Web开发质量和开发流程的最新技术。本书主要分两大块，首先是以构建为目标实现JavaScript驱动开发，其次介绍如何管理应用设计过程中的复杂度，包括模块化、MVC、异步代码流、测试以及API设计原则。一起来看看《JavaScript Web应用开发》这本书的介绍吧!

码农工具