如何解决动态扩展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只会覆盖它,所以在那里没有问题。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。