我如何在每个屏幕上收到不同的消息？答案

【问题标题】：How would I get a different message on each screen?我如何在每个屏幕上收到不同的消息？
【发布时间】：2019-11-10 12:12:20
【问题描述】：

我正在与 Vee Validate 3.0 作斗争，并开始怀疑是否值得继续使用。我要做的就是为特定页面上的特定字段创建自定义消息。

我已尝试使用以下代码更改正则表达式消息，但无法正常工作。

我正在使用 Vee Validate 3.0 和 Vue，因此没有太多在线资源可以提供帮助。版本 2 的语法似乎要简单得多！

<ValidationObserver ref="observer" v-slot="{ invalid }" tag="form" @submit.prevent="submit()">
  <ValidationProvider :rules="{ regex: /^(0[1-9]|1[0-2])\/\d{4}$/ }" name="exp_date" v-slot="{ errors }">
    <input name="exp_date" v-model="payment.expdate" placeholder="Expiry MM/YYYY" class="form-control"/>
    <span class="warning">{{ errors[0] }}</span>
   </ValidationProvider>
</ValidationObserver>

<script>
import { ValidationProvider, ValidationObserver } from 'vee-validate'

export default {
  components: {
    ValidationProvider,
    ValidationObserver
  },
  data: function () {
    return {
      customMessages: {
        en: {
          fields: {
            'exp_date': {
              regex: 'The date format is MM/YYYY'
            }
          }
        }
      }
    }
  }
}
</script>

更新

我有这个问题，但我不确定我的设置是否正确。

在我的 main.js 中，我正在像这样导入 vee-validate.js

import './vee-validate'

在 vee-validate.js 中，我正在像这样设置在应用程序级别进行验证所需的一切

import { extend, configure, localize } from 'vee-validate'
import { required, max, max_value, email, regex, is, is_not } from 'vee-validate/dist/rules'
import en from 'vee-validate/dist/locale/en.json'

// Install rules
extend('required', required)
extend('max', max)
extend('max_value', max_value)
extend('email', email)
extend('regex', regex)
extend('is', is)
extend('is_not', is_not)

// Override English
localize({
  en: {
    messages: en.messages,
    fields: {
      exp_date: {
        regex: '{_field_} is the wrong format. MM/YYYY'
      }
    }
  }
})

现在，在这里设置自定义消息对我有用，但我不明白的是，如果我在 2 个单独的屏幕上有相同的字段，我将如何在每个屏幕上获得不同的消息？

更新 2

我认为没有办法为每页设置一条消息 - 我认为解决此问题的方法是确保每个页面都有唯一的字段名称。

【问题讨论】：

您能否描述一下您的示例此时发生了什么？您收到错误还是没有验证？
@Merc，验证确实触发了，但我仍然看到默认消息而不是我的自定义消息
嗯，我将 vee-validate 与自定义消息和自定义验证器一起使用，但我认为它与 vee-validate 2 一起使用。因此，使用 3 时可能会发生一些变化。我会尝试看看新版本，但与此同时：我像这样使用它import validationMessagesEn from 'vee-validate/dist/locale/en' 然后我会添加像validationMessagesEn.messages.atLeastOne = 'At least one interest has to be selected.' 这样的自定义消息，稍后我将在自定义验证器中使用它们......无论如何我会试着看看它
好的，我明白了。当然，如果您将消息设置为一次验证，它将在您的整个应用程序中使用。我认为，正如您自己所说，没有办法改变页面本身的信息。也许您可以根据路线更改消息？（您是否有权访问代码中定义消息的某处的路由？）
除此之外：你如何使用 vee-validate。在组件级别？（在这里他们在全球范围内注册：logaretm.github.io/vee-validate/guide/getting-started.html#es6）。但也许您不必在全球范围内注册它，而只需在您的两个页面/组件中使用，并使用特定消息扩展每个页面上的消息？那行得通吗？..对不起，除了我必须在 vue 应用程序中安装 vee-validate 并测试自己...

标签： vee-validate

【解决方案1】：

有几种方法可以做到这一点，通过在每个页面上自己调用localize 或使用ValidationProvider 的customMessages 属性。

第一种方法：您可以在每个页面的组件created或mounted生命周期方法中调用localize：

<template>
  <!-- Your Template -->
</template>

<script>
import { localize } from 'vee-validate';

export default {
  mounted () {
    localize('en', {
      // custom messages for this page
    });
  }
};
</script>

第二种方法（推荐）：ValidationProvider 接受一个 customMessages 属性，它可以覆盖设置到该字段的任何消息，因此您可以进行这样的每页设置：

<template>
  <ValidationProvider :customMessages="messages" v-slot="{ errors }">
    <!-- Your Input -->
  </ValidationProvider>
</template>

<script>
export default {
  data: () => ({
    messages: {
      // your custom messages.
    }
  })
};
</script>

我知道文档需要改进，我目前正在重写它，希望一些未使用的功能可以引起关注。

【讨论】：

方法 2 看起来像赢家 :)