Validierungsregel an Formularfeld programmgesteuert anhängen

Question

Ich verwende VeeValidate, um eine Validierung auf einem Formular durchzuführen, das mit Vue.js erstellt wurde. Ich habe es eingerichtet, um einen Bereich mit der Fehlermeldung anzuzeigen, die sich auf die Eingabe bezieht, bei der der Fehler aufgetreten ist.

<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> 

Alle Eingänge sind auf die gleiche Weise eingerichtet und sie funktionieren alle korrekt. Das Problem tritt auf, wenn ich der obigen Eingabe eine Validierungsregel hinzufügen möchte, die eine date-between-Regel erfordert, die ein Jahr vom heutigen Datum als Maximalwert verwendet.

date_between:{min,max}

Das v-validate Attribut nimmt in einem String der durch eine | delimted Validierungsregeln. Es gibt eine Möglichkeit, Regeln dynamisch über die Validator-Instanz hinzuzufügen, die automatisch an die Vue-Instanz angefügt wird.

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

Ich habe versucht, den Code sowohl in der 'created' and 'mounted' life cycle hooks zu tun, und weder die Ergebnisse ergab die ich suche.

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' 
    }); 

Das Ärgerliche ist, funktioniert der Code, denn wenn ich die Konsole (Chrom) verwenden, um meinen Code einzufügen, ist es mir um die gewünschten Ergebnisse liefert, wenn alles auf dem Bildschirm wiedergegeben wird. Ich bin mir nicht sicher, ob ich die richtigen Lebenszyklus-Haken verwende.

Answer 1

Die Art und Weise Ich habe um diese Hacky fühlt, aber ich konnte es nicht mit meinem ursprünglichen Ansatz zu arbeiten.

Für Datumsfelder, die einen dynamischen Bereich erforderten, verwendete ich die Regel-Zeichenkette string und verkettete eine berechnete Eigenschaft.

Zum Beispiel:

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>