क्षेत्र प्रोग्रामेटिक रूप से फ़ील्ड बनाने के लिए सत्यापन नियम संलग्न करें

Question

मैं के साथ किए गए फ़ॉर्म पर कुछ सत्यापन करने के लिए VeeValidate का उपयोग कर रहा हूं। मैंने इनपुट से संबंधित त्रुटि संदेश के साथ एक अवधि प्रदर्शित करने के लिए सेट किया है जहां त्रुटि हुई थी।

<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 सत्यापन नियमों की एक स्ट्रिंग में ले जाता है। वैचारिक उदाहरण के माध्यम से गतिशील रूप से नियम जोड़ने का एक तरीका है जो स्वचालित रूप से वू उदाहरण से जुड़ा हुआ है।

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

कष्टप्रद बात है, कोड काम करता है क्योंकि अगर मैं कंसोल (क्रोम) का उपयोग अपने कोड डालने के लिए, यह मेरे वांछित परिणाम देता है एक बार सब कुछ स्क्रीन पर प्रदान की गई है। मुझे यकीन नहीं है कि मैं सही जीवन चक्र हुक का उपयोग कर रहा हूं।

Answer 1

तरीका मुझे मिल गया के आसपास इस hacky महसूस करता है लेकिन मैं इसे अपने मूल दृष्टिकोण के साथ काम करने के लिए नहीं मिल सका।

उन दिनों के लिए जिनके लिए गतिशील रेंज की आवश्यकता होती है, मैं डायरेक्टिव स्टाइल नियम स्ट्रिंग का उपयोग करके समाप्त हो गया और एक गणना की गई संपत्ति को संयोजित कर दिया।

उदाहरण के लिए:

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>