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

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) 插入我的代码，一旦所有内容都呈现在屏幕上，它就会给我想要的结果。我不确定我是否使用了正确的生命周期 Hook 。

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>