动态扩展vee验证规则

问题描述

我正在使用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规则非常重，大部分时间都未使用。

我的想法是将其包含在名为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包含两次，也许甚至可以阻止将规则添加两次。？

解决方法

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

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

第二个选择是使用异步组件，这是我希望的，因为它要简单得多。

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

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

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

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