如何使用VeeValidate(Vue.Js)上的词典为ValidationProvider自定义“必需”错误消息

时间:2019-03-10 14:18:54

标签: javascript vue.js vuejs2 vee-validate

当我的带有规则的组件 MyInput 未填充时(换句话说,当一个带有“ cpf”的组件时,我想更改错误消息)规则不符合“必需” 规则)。

我认为带有自定义消息的“词典方法”应该可以完成工作,但是我无法使其工作。

使用以下代码,显示的错误消息为“ O campo cpféobrigatório”。我想在(“ Favor preencher o cpf”)下面的字典dict中显示该消息。我认为由于某些原因未考虑字典

在我的 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">
     <ValidationObserver ref="observer">
         <ValidationProvider ref="cpfinput" rules="cpf" name="CPF">
            <myInput
              slot-scope="{ errors }"
              :errorProp="errors"
              name="cpf"
            />
          </ValidationProvider>
      </ValidationObserver>    
    </div>
</template>

我正在使用vee-validate 2.1.5vue 2.5.17

1 个答案:

答案 0 :(得分:1)

像这样通过您的字典,它应该可以工作:

protected $request;

/**
 * Create a new job instance.
 *
 * @return void
 */
public function __construct($request)
{
    $this->request = $request;
}

/**
 * Execute the job.
 *
 * @return void
 */
public function handle()
{
    $mailable = new SendEmailMailable($this->request);
    Mail::to('admin@admin.dk')->send($mailable);

}