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

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规则，该规则使用从今天开始的年份作为最大值。

date_between:{min,max}

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

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

我尝试在'created' and 'mounted' life cycle hooks中执行以下代码，但都没有产生我正在寻找的结果。

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>