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

Posted 2023-02-16

【中文标题】以编程方式将验证规则附加到表单字段

【英文标题】：Attach validation rule to form field programmatically

【发布时间】：2017-08-09 09:56:18

【问题描述】：

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

【问题讨论】：

提供附加代码，以及如何创建验证器。正如我在这里看到的vee-validate.logaretm.com/api.html#validator，还有另一种方法可以做到attach。 this.$validator 是什么？您正在使用什么钩子 - 一个用于指令或一个用于组件？

【参考方案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>