vue.js - 多个验证插件问题

Question

我正在做一个项目，我们称它为 ABC 项目。
该项目使用 Nuxt 作为前端，并使用vuelidateandvuelidate-error-extractor进行验证。
这个项目有一个我创建的自定义模块，它也有vuelidate和vuelidate-error-extractor作为依赖项。

在 nuxt 项目中，有一个vuelidate.js我创建的插件 ( )。它具有与 ABC 项目相关的所有消息和属性。

这是vulidate.js我的 Nuxt 项目中的文件

import Vue from 'vue'
import Vuelidate from 'vuelidate'
import VuelidateErrorExtractor, { templates } from 'vuelidate-error-extractor'

import BootstrapVue from 'bootstrap-vue'

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

import FormGroup from '@/components/mm/common/base/FormGroup'
import FormSummary from '@/components/mm/common/base/FormSummary'

const messages = {
  required: '{attribute} is required.',
  requiredCustom: '{attribute} is required.',
  notColombo: '{attribute} must not be Colombo',
  email: '{attribute} should be a valid email.',
  maxLength: '{attribute} should be less than {max} characters.',
  onlynumbers: '{attribute} should be numbers.',
  internationalTpNumber: 'Maximum length of a phone number is 15 digits',
  fullNameErrorPassport: 'Full Name is required',
  noFutureDate: '{attribute} must not be set in the future.',
  minTransactionDate: '{attribute} must be set on or before 01-January-2008',
  startDate: 'Date of Birth',
  startDateValidate: 'Start date must be greater than registration date and cannot be future date.',
 
}

Vue.use(BootstrapVue)
Vue.use(Vuelidate)
Vue.use(VuelidateErrorExtractor, {
  messages,
  attributes: {
    districtId: 'District',
    address1: 'Address',
    postalCode: 'Postal Code',
    village: 'Village',
    district: 'District',
    proposedName: 'Proposed Name',
    selectedcountry: 'Country',
    name: 'Name',
    contactNumber: 'Contact Number',
    email: 'Email Address',
    identityNumber: 'Identification Document Number',
    dateOfChange: 'Date of Change',
    dob: 'Date of Birth',
    fullName: 'Full Name',
    occupationId: 'Occupation',
    nationalityId: 'Nationality',
    phoneNumber: 'Phone Number',
    countryCode: 'Country Code',
    gender: 'Gender',
    retirementDate: 'Retirement Date',
    startDate: 'Date of Birth'
  }
})

Vue.component('FormGroup', FormGroup)
Vue.component('FormSummary', FormSummary)
Vue.component('formWrapper', templates.FormWrapper)

该模块还有一个名为的自定义插件vuelidate.js，看起来像 Nuxt 项目中的插件。

唯一的变化是模块在vulidate.js文件中有一组不同的属性和消息。
问题是模块覆盖了 Nuxt 的vuelidate文件，这意味着 Nuxt 项目中的表单显示了一些来自模块而不是来自 Nuxt 项目的错误消息。

我们可以设置插件的范围吗？
我们可以阻止 Nuxt 项目使用来自模块的错误消息，而是使用来自 Nuxt 项目的错误消息吗？

这是我vuelidate.js在模块中的文件

import Vue from 'vue'
import Vuelidate from 'vuelidate'
import VuelidateErrorExtractor, { templates } from 'vuelidate-error-extractor'

import BootstrapVue from 'bootstrap-vue'

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

import FormGroup from '@/components/mm/common/base/FormGroup'
import FormSummary from '@/components/mm/common/base/FormSummary'

const messages = {
  required: '{attribute} is required.',
  requiredCustom: '{attribute} is required.',
  notColombo: '{attribute} must not be Colombo',
  email: '{attribute} should be a valid email.',
  maxLength: '{attribute} should be less than {max} characters.',
  onlynumbers: '{attribute} should be numbers.',
  internationalTpNumber: 'Maximum length of a phone number is 15 digits',
  fullNameErrorPassport: 'Full Name is required',
  noFutureDate: '{attribute} must not be set in the future.',
  minTransactionDate: '{attribute} must be set on or before 01-January-2008',
  startDate: 'Date of Birth',
  startDateValidate: 'Start date must be greater than registration date and cannot be future date.',

}

Vue.use(BootstrapVue)
Vue.use(Vuelidate)
Vue.use(VuelidateErrorExtractor, {
  messages,
  attributes: {
    dob: 'Date of Birth',
    fullName: 'Full Name',
    occupationId: 'Occupation',
    nationalityId: 'Nationality',
    phoneNumber: 'Phone Number',
     age:"Age"
    countryCode: 'Country Code',
    gender: 'Gender',
    retirementDate: 'Retirement Date',
    startDate: 'Date of Birth'
  }
})

Vue.component('FormGroup', FormGroup)
Vue.component('FormSummary', FormSummary)
Vue.component('formWrapper', templates.FormWrapper)

标签： vue.jsnuxt.js