以编程方式将验证规则附加到表单字段

Question

我使用VeeValidate做了一个表格上一些验证Vue.js.我将其设置为显示带有与发生错误的输入相关的错误消息的跨度.

<div class="input-group">
  <input type="date" 
         class="form-control" 
         name="panelData.AnalysisDate" 
         data-vv-as="Analysis Date" 
         v-model="panelData.AnalysisDate"
         v-validate="'required|date_format:YYYY-MM-DD'">
</div>
<span v-show="errors.has('panelData.AnalysisDate')" class="redText">{{errors.first('panelData.AnalysisDate')}}</span>

所有输入都以相同的方式设置,它们都正常工作.当我尝试将验证规则添加到上述输入时,会出现问题,该规则要求使用从今天的日期开始的年份作为最大值的日期之间规则.

date_between:{min,max}

该v-validate属性接受由a分隔的验证规则的字符串|.有一种方法可以通过自动附加到Vue实例的验证器实例动态添加规则.

$validator.attach({field}, {rules list}, {options})

我尝试在'created'和'mount'生命周期钩子中执行下面的代码,但都没有产生我正在寻找的结果.

var today = new Date();
var yearFromToday = new Date(today.getFullYear() + 1, today.getMonth(), today.getDate());

var yearFromTodayStr = yearFromToday.toISOString().substring(0, 10);
//'this' refers to the current view instance
//'panelData' is the name of an object in my component's data object
this.$validator.attach('panelData.AnalysisDate', 'date_between:2001-01-01,' + yearFromTodayStr, {
        prettyName: 'Analysis Date'
    });

令人讨厌的是,代码有效,因为如果我使用控制台(chrome)插入我的代码,它会在屏幕上呈现所有内容后给我所需的结果.我不确定我是否使用了正确的生命周期钩子.

Answer 1

我解决这个问题的方法感觉很奇怪，但我无法让它与我原来的方法一起工作。

对于需要动态范围的日期字段，我最终使用指令样式规则字符串并连接计算属性。

例如：

  computed: {
    ninetyNineYearsAgo() {
      return new Date().getFullYear() - 99;
    },
    eighteenYearsAgoFormatted() {
      let eighteenYearsAgo = new Date().getFullYear() - 18;
      let todayISODate = new Date().toISOString().split('T')[0];
      return eighteenYearsAgo + '-' + todayISODate.split('-')[1] + '-' + todayISODate.split('-')[2];
    }
  }

<div class="input-group">
  <input type="date" 
         class="form-control" 
         name="panelData.AnalysisDate" 
         data-vv-as="Analysis Date" 
         v-model="panelData.AnalysisDate"
         v-validate="'date_format:YYYY-MM-DD|date_between:' + ninetyNineYearsAgo +'-01-01,'+ eighteenYearsAgoFormatted + ',true'">
</div>