以编程方式附加验证规则以形成字段

我正在使用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属性采用在由| delimted验证规则的字符串。有一种方法可以通过自动附加到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' 
    });

的讨厌的事情是，代码工作，因为如果我使用控制台（铬）来插入我的代码，它给了我想要的结果，一旦一切都在屏幕上呈现。我不确定我是否正在使用正确的生命周期挂钩。

来源

2017-03-17 Ju66ernaut

用于连接此，以及如何创建验证提供代码。正如我在这里可以看到http://vee-validate.logaretm.com/api.html#validator有另一种方式来执行'attach'。什么是'this。$ validator'？您使用的是什么钩子 - 一个用于指令或一个用于组件？ –

我身边这种感觉哈克，但我无法得到它与我原来的做法的工作方式。

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

例如：

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>

来源

2017-12-15 18:12:48 Ju66ernaut

以编程方式附加验证规则以形成字段

回答

相关问题