我如何在每个屏幕上获得不同的消息？

Question

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

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

我在 Vue 中使用 Vee Validate 3.0，因此没有太多在线资源可以提供帮助。版本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

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

Answer 1

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

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

<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>

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

我如何在每个屏幕上获得不同的消息？

How would I get a different message on each screen?

vee-validate

更新

更新 2