以編程方式附加驗證規則以形成字段

我正在使用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

以編程方式附加驗證規則以形成字段

回答

相關問題