Bagisto框架中如何单独修改指定字段的验证提示信息

针对Bagisto框架中使用的vee-validate验证组件，以下是三种可行的方案，实现单独修改od_axis/os_axis字段的验证提示，且不改动全局min_value/max_value的提示文本：

方案1：通过方法判断错误规则，返回自定义提示 #

修改Vue中的错误处理方法，根据触发的验证规则返回对应自定义提示，同时简化模板中的错误容器：

模板代码 #

<div id="odAxisDiv" class="pres-select-form" :class="[errors.has('od_axis') || odaxiserror ? 'has-error' : '']">
  <input
    class="form-control"
    id="od_axis"
    type="number"
    name="od_axis"
    disabled
    v-validate="'required|min_value:1|max_value:180'"
    data-vv-as="Axis"
  />
  <div class="control-error" v-if="errors.has('od_axis') || odaxiserror">
    {{ getOdAxisErrorMessage() }}
  </div>
</div>

Vue方法代码 #

getOdAxisErrorMessage() {
  const error = this.errors.get('od_axis');
  // 处理vee-validate的验证错误
  if (error) {
    switch(error.rule) {
      case 'max_value':
        return 'Axis数值不能超过180';
      case 'min_value':
        return 'Axis数值不能小于1';
      case 'required':
        return 'Axis为必填项';
      default:
        return error.msg;
    }
  }
  // 处理自定义的odaxiserror错误
  else if (this.odaxiserror) {
    return this.odaxiserror;
  }
  return '';
}

方案2：直接在input标签上配置自定义消息 #

利用vee-validate的data-vv-custom-message属性，直接在模板中为字段指定各规则的提示文本，无需修改Vue方法：

<input
  class="form-control"
  id="od_axis"
  type="number"
  name="od_axis"
  disabled
  v-validate="'required|min_value:1|max_value:180'"
  data-vv-as="Axis"
  data-vv-custom-message='{"min_value": "Axis数值不能小于1", "max_value": "Axis数值不能超过180", "required": "Axis不能为空"}'
/>

<!-- 错误显示保持原有逻辑即可 -->
<div id="odAxisErr2" class="control-error" v-if="errors.has('od_axis')" v-text="errors.first('od_axis')"></div>
<div id="odAxisErr1" class="control-error" v-if="odaxiserror" v-text="odaxiserror"></div>

方案3：扩展专属验证规则 #

扩展仅用于该字段的自定义验证规则，完全独立于全局min_value/max_value规则：

Vue组件初始化代码 #

created() {
  // 扩展Axis专属的最小数值规则
  this.$validator.extend('axis_min', {
    validate: value => value >= 1,
    message: 'Axis数值不能小于1'
  });
  // 扩展Axis专属的最大数值规则
  this.$validator.extend('axis_max', {
    validate: value => value <= 180,
    message: 'Axis数值不能超过180'
  });
}

模板代码 #

<input
  class="form-control"
  id="od_axis"
  type="number"
  name="od_axis"
  disabled
  v-validate="'required|axis_min|axis_max'"
  data-vv-as="Axis"
/>

<!-- 错误显示保持原有逻辑即可 -->
<div id="odAxisErr2" class="control-error" v-if="errors.has('od_axis')" v-text="errors.first('od_axis')"></div>
<div id="odAxisErr1" class="control-error" v-if="odaxiserror" v-text="odaxiserror"></div>

原方案失效原因说明 #

你之前的getOdAxisErrorMessage方法中，return this.errors.first('od_axis') || 'xxx'逻辑存在问题：errors.first已返回默认提示文本，永远不会触发后面的自定义文本分支，因此无法生效。

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