Question

我正在与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

我认为没有一种方法可以为每页设置一条消息-我认为解决此问题的方法是确保每页具有唯一的字段名称。

Answer 1

您可以通过以下两种方法来做到这一点：在每个页面上自己叫localize或使用ValidationProvider的{{1}}道具。

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

mounted

第二种方法（推荐）：：<template>  </template> <script> import { localize } from 'vee-validate'; export default { mounted () { localize('en', { // custom messages for this page }); } }; </script>接受ValidationProvider道具，该道具可以覆盖设置到该字段的任何消息，因此您可以进行类似每页的设置这个：

customMessages

我知道文档需要工作，目前正在重新编写文档，希望一些未使用的功能可以引起人们的关注。

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

更新

更新2

1 个答案: