Vue Laravel Validator如何自定义表单验证错误提示文本？

嘿，我来帮你搞定这个错误提示的修改问题～Vue Laravel Validator本质上对接了Laravel的验证规则体系，修改错误文本有几种简单的方式，看你更倾向哪一种：

方法1：全局自定义验证消息 #

如果你想让所有相同规则的错误提示统一修改，可以在Vue实例初始化时配置本地化消息：

new Vue({
  el: '#app',
  created() {
    // 针对英文环境自定义消息
    this.$validator.localize('en', {
      messages: {
        required: 'The :attribute field cannot be empty.',
        // 针对字符串类型的min规则自定义提示
        min: {
          string: 'the title only 6 characters'
        },
        // 如需修改max规则提示，可在这里添加
        max: {
          string: 'The title cannot exceed 46 characters'
        }
      }
    });
  },
  data() {
    return {
      title: ''
    }
  }
});

这里的:attribute是占位符，会自动替换成表单字段的name属性值（也就是你的title），不需要的话直接写死文本即可。

方法2：单独给字段指定自定义消息 #

如果只想修改这一个字段的错误提示、不影响全局，可以用两种方式实现：

方式A：规则对象配置消息 #

把原来的字符串规则改成对象格式，同时为每个规则指定自定义消息：

<input 
  id="name" 
  v-validate="{ 
    required: { rule: true, message: 'The title is required' },
    min: { rule: 6, message: 'the title only 6 characters' },
    max: { rule: 46, message: 'Title cannot be longer than 46 characters' }
  }" 
  type="text" 
  name="title" 
  class="form-control" 
  v-model="title"
>
<div class="help-block with-errors" v-show="errors.has('title')">
  В название: <a> {{ errors.first('title') }}</a> 
</div>

方式B：HTML属性指定消息 #

直接在input标签上添加data-vv-msg-规则名属性，单独设置该字段的规则提示：

<input 
  id="name" 
  v-validate="'min:6|max:46|required'" 
  type="text" 
  name="title" 
  class="form-control" 
  v-model="title"
  data-vv-msg-required="Title is required!"
  data-vv-msg-min="the title only 6 characters"
  data-vv-msg-max="Title can't be over 46 characters"
>
<div class="help-block with-errors" v-show="errors.has('title')">
  В название: <a> {{ errors.first('title') }}</a> 
</div>

这样就能轻松把错误提示改成你想要的内容啦～

内容的提问来源于stack exchange，提问作者Andrey