web-dev-qa-db-ja.com

Vee-Validateのデフォルトのエラーメッセージを変更する方法

Vue.jsとVee-Validateを使用して、デフォルトのエラーメッセージを変更するにはどうすればよいですか？

Vee-Validateデモの例

すぐに必要なメッセージが表示され、「<fieldname>フィールドが必要です。」と表示されます。ただし、代わりに「必須」を表示するために必要なすべてのフィールドが必要です。個々のフィールドを上書きできることはわかっていますが、「必須」を表示するために必要なエラーを表示するフィールドをグローバルに上書きしたいだけです。

javascriptvue.jsvee-validate
5
RichC

公式ドキュメントの フィールド固有のカスタムメッセージ をご覧ください。

基本的に、オーバーライドする言語ごとにカスタム辞書を提供する必要があります。

3
chrisg86

興味深いGistを見つけました。実際、辞書を上書きするだけです。一度完了するととても簡単なようです...

興味深い要点： https://Gist.github.com/ramadimasatria/1819d4da13afb2ec3c2505f88bb760af

セットアップ：

  1. vee-validateからインポートできないため、カスタムメッセージとformatFileSize関数のコピーと貼り付けでjsファイルを作成します。

私のプロジェクトでは、standard-messages/messages.fr.jsで（ https://github.com/baianat/vee-validate/tree/4738e09c5397a951b9b986a4ce23e248bedcd295/locale にあるfr.jsからコピー）：

const formatFileSize = size => {
  const units = ['Byte', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
  const threshold = 1024
  size = Number(size) * threshold
  const i = size === 0 ? 0 : Math.floor(Math.log(size) / Math.log(threshold))
  return `${(size / Math.pow(threshold, i)).toFixed(2) * 1} ${units[i]}`
}

export default {
  _default: field => `${field} n'est pas valide.`,
  [...]
}
  1. バリデーターの設定で、カスタムメッセージがデフォルトメッセージを上書きします。

私のvalidation/index.js：

import Vue from 'vue'
import VeeValidate from 'vee-validate'
import { messages as frOriginalMessages } from 'vee-validate/dist/locale/fr'
import { messages as nlOriginalMessages } from 'vee-validate/dist/locale/nl'
import { messages as deOriginalMessages } from 'vee-validate/dist/locale/de'
import frAttributes from './attributes/attributes.fr.json'
import nlAttributes from './attributes/attributes.nl.json'
import deAttributes from './attributes/attributes.de.json'
import validators from './validators'
import frCustomStandardMessages from './standard-messages/messages.fr.js'

export default {
  configure(currentLocale) {
    Vue.use(VeeValidate, {
      inject: false,
      locale: currentLocale,
      dictionary: {
        fr: { messages: { ...frOriginalMessages, ...frCustomStandardMessages }, 
attributes: frAttributes },
        nl: { messages: { ...nlOriginalMessages}, attributes: 
nlAttributes },
        de: { messages: { ...deOriginalMessages}, attributes: 
deAttributes }
      }
    })
0
barbara.post