1

I'm battling with Vee Validate 3.0 and am beginning to wonder if it's worth continuing with. All I want to do is create a custom message for a specific field on a specific page.

I've tried the code below to change the regex message but I can't get it to work.

I'm using Vee Validate 3.0 with Vue, so there aren't many resources online to help. Version 2 syntax seems to be a lot simpler!

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

Update

I've got somewhere with this but I'm not sure if I'm setting things up correctly.

In my main.js I am importing vee-validate.js like this

import './vee-validate'

In vee-validate.js I'm setting up everything I need for validation at the application level like this

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'
      }
    }
  }
})

Now, setting the custom message here is working for me but what I don't understand is, if I have the same field on 2 separate screens, how would I get a different message on each screen?

Update 2

I don't think there's a way to set up a message per page - I think the way around this is to ensure each page has unique field names.

4

1 回答 1

2

有几种方法可以做到这一点，要么localize在每个页面上调用你自己，要么使用ValidationProvider'scustomMessages属性。

第一种方法：您可以调用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>

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

于 2019-11-18T02:57:00.417 回答