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

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

查看所有标签

猜你喜欢:

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

码农书籍

Usability for the Web

Tom Brinck、Darren Gergle、Scott D. Wood / Morgan Kaufmann / 2001-10-15 / USD 65.95

Every stage in the design of a new web site is an opportunity to meet or miss deadlines and budgetary goals. Every stage is an opportunity to boost or undercut the site's usability. Thi......一起来看看《Usability for the Web》这本书的介绍吧!

码农工具