Question

我正在尝试（没有成功）为vee-validate定制错误消息，但网站上的所有示例都使用ES6。我可以打赌，如果没有它，它也是可行的，所以任何有关我做错的建议都表示赞赏：）

<script>
    const messages = {
      en: {
        confirmed: "Your password is not confirmed",
        email: "I really dont like your email"
      }
    };

    Vue.use(VeeValidate);
    var app = new Vue({
        el: '#app'            
    });
    app.$validator.updateDictionary(messages);
</script>

没有错误，只使用默认消息。

更新

以下是我的HTML代码。

<input type="text" name="email" v-validate data-vv-rules="required|email" />
<span v-show="errors.has('email')">{{ errors.first('email') }}</span>

<input type="password" name="password" v-validate data-vv-rules="required" />
<span v-show="errors.has('password')">{{ errors.first('confirmation')}} </span>  
<input type="password" name="confirmation" v-validate data-vv-rules="confirmed:password"/>
<span v-show="errors.has('confirmation')">{{ errors.first('confirmation')}}/span>

Answer 1

() =>是在ES6中定义函数的语法，因此要将vee-validate的语法转换为较旧的Javascript。

所以来自documentation：

alpha: () => 'Some English Message'

将等同于

alpha: function() {
  return 'Some English Message'
}

同样，您必须进行以下更改：

<script>
    const messages = {
      en: {
        confirmed: function () { 
            return "Your password is not confirmed"
        },
        email: function () { 
            return "I really dont like your email"
        }
      }
    };

    Vue.use(VeeValidate);
    var app = new Vue({
        el: '#app'            
    });
    app.$validator.updateDictionary(messages);
</script>

使用工作示例更新了答案

以上代码中似乎存在一些语法错误，以下是最新vee-validate syntax的工作代码：

<script>
const dictionary = {
  en: {
    messages: {
      confirmed: function () { 
        return "Your password is not confirmed"
      },
      email: function () { 
        return "I really dont like your email"
      }
    }
  }
};

VeeValidate.Validator.updateDictionary(dictionary);
Vue.use(VeeValidate);
Vue.config.debug = true;
var App = new Vue({
    el: '#app'
});
</script>

工作fiddle。

vue2 plus vee-validate - 如何在没有ES6的情况下自定义错误消息？

1 个答案:

使用工作示例更新了答案