动态扩展 vee-validate 规则

Question

我正在使用 vee-validate 来验证输入字段。

因为我需要验证 IBAN 输入，所以我安装了 ibankit 作为依赖并将其添加到我的 app.js

import {IBAN} from "ibankit";
import {extend, ValidationProvider} from 'vee-validate';
import Vue from 'vue';

Vue.component ('ValidationProvider', ValidationProvider);

extend ('required', {
    ...required,
    message: 'This field is required'
});

extend ('email', {
    ...email,
    message: 'This field needs to be a valid e-mail adress'
});

extend ('integer', {
    ...integer,
    message: 'This field needs to be an integer'
});

extend ('iban', {
    validate: (str) => {
        return IBAN.isValid (str);
    },
    message: 'This is not a valid IBAN'
});

const main = new Vue ({
    el: '#app',
    store: store,
    render: h => h (App)
});


export default main;

不幸的是，ibankit-rules 非常重量级，大部分时间未被使用。

我的想法是将其包含到名为 IbanInput.vue 的组件中并在那里扩展规则：

<template>
    <ValidationProvider :rules="{ iban: true }" :vid="name" v-bind="$attrs" v-slot="{ errors }" tag="div" class="w-full">
        <input
           [...]
        >
    </ValidationProvider>
</template>
<script>
export default {
    name: 'IbanField',
}
</script>

现在我想知道如何在此处导入 ibankit 并扩展 vee-validate-rules。如果 iban-field 被包含两次，甚至可以防止规则被添加两次...?

Answer 1

这里有两种方法，您可以异步加载 ibankit 本身并使用动态扩展 import():

import('ibankit').then(module => {
  extend('iban', ...);
});

第二个选项是使用异步组件，这是我更喜欢的，因为它更简单。

将您的 ibankit 导入您的组件并调用 extend，就像通常在 export 语句之前或生命周期挂钩内的任何地方一样。

然后将您的 IbanInput 定义为异步组件：

{
  components: {
    IbanInput: () => import('@/components/IbanInput.vue')
  }
}

无论哪种方式，您都不必担心多次导入它，因为浏览器已经加载了包并且 vee-validate 只会覆盖它，所以没有问题。

动态扩展 vee-validate 规则

Extend vee-validate rules dynamically

vue.js

vue-component

vuejs2

vee-validate