Как настроить «обязательные» сообщения об ошибках, используя словарь на VeeValidate (Vue.Js) - PullRequest
Новая
       15

Как настроить «обязательные» сообщения об ошибках, используя словарь на VeeValidate (Vue.Js)

0 голосов
/ 01 марта 2019

Я хотел бы изменить сообщение об ошибке, когда ввод с правилом "cpf" не заполнен (другими словами, когда ввод с правилом "cpf" не удовлетворяет правилу "required").

Я думаю, что «метод словаря» с пользовательскими сообщениями должен работать, но я не мог заставить его работать.

С кодом, приведенным ниже, отображается сообщение об ошибке просто по умолчанию pt_br сообщение для "обязательных" полей.Я хотел бы отобразить сообщение в словаре dict ниже (" Favor preencher o cpf ")

В моем main.js ,У меня есть следующий код: 

import Vue from 'vue';
import App from './App.vue';
import './core/extensions';

new Vue({
  render: h => h(App),
}).$mount('#app');

И на extensions.js : 

 import Vue from 'vue';
 import VeeValidate, { Validator } from 'vee-validate';
 import ptBR from 'vee-validate/dist/locale/pt_BR';

 const dict = {
     messages: ptBR.messages,
     pt_BR: {
      custom: {
         cpf: {
           required: 'Favor preencher o cpf',
         },
       }
     },
   };

Vue.use(VeeValidate);

Validator.localize({ pt_BR: dict })

Validator.extend('cpf', (val) => {
     return false //just to test
});

App.vue (простой пример):

<template>
    <div id="app">
        <input type="text" v-validate="required|cpf">      
    </div>
</template>

Я использую vee-validate 2.1.5 и vue 2.5.17

Ответы [ 2 ]

0 голосов
/ 01 марта 2019

Взгляните на Пользовательские сообщения для конкретных полей в официальной документации.

В основном вам нужно указать пользовательский dict для каждого языка, который вы хотите переопределить.

0 голосов
/ 01 марта 2019

Я считаю, что в этом случае валидатор использует cpf в качестве имени поля, а не правила валидации.

Мне неясно, почему правило cpf должно вызывать правило required, но если вы передаете входному атрибуту name или data-vv-name, например: 

<input type="text" data-vv-name="cpf" v-validate="required">

и передайте следующие аргументы localize: 

Validator.localize('pt_BR', {
  custom: {
    cpf: {
      required: 'Favor preencher o cpf'
    }
  }
})

Это будет отображать ваше локализованное сообщение, когда поле пусто.

Вот пример сообщения об ошибке, относящейся к полю (замените'en' с 'pt_BR' по мере необходимости) 

VeeValidate.Validator.localize('en', {
  custom: {
    cpf: {
      required: 'Favor preencher o cpf'
    }
  }
})

Vue.use(VeeValidate)

new Vue({
  el: '#app'
})
p {
  color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vee-validate@latest"></script>
<div id="app">
  <input type="text" data-vv-name="cpf" v-validate="'required'">
  <p>{{ errors.first('cpf') }}</p>
</div>
...