Đính kèm quy tắc xác thực vào trường biểu mẫu theo lập trình

Question

Tôi đang sử dụng VeeValidate để thực hiện xác thực trên biểu mẫu được thực hiện với Vue.js. Tôi có nó được thiết lập để hiển thị một khoảng với thông báo lỗi liên quan đến đầu vào nơi xảy ra lỗi.

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

Tất cả các yếu tố đầu vào đều được thiết lập theo cùng một cách và chúng đều hoạt động chính xác. Sự cố phát sinh khi tôi cố thêm quy tắc xác thực vào đầu vào ở trên yêu cầu quy tắc date-between sử dụng một năm kể từ ngày hôm nay làm giá trị tối đa.

date_between:{min,max}

Các v-validate thuộc tính mất trong một chuỗi các quy tắc xác nhận delimted bởi một |. Có một cách để tự động thêm các quy tắc thông qua cá thể validator được tự động gắn vào cá thể Vue.

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

tôi đã cố gắng để làm mã dưới đây trong cả 'created' and 'mounted' life cycle hooks và không mang lại kết quả tôi đang tìm kiếm.

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

Điều khó chịu là, mã hoạt động vì nếu tôi sử dụng bàn điều khiển (chrome) để chèn mã, nó sẽ cho tôi kết quả mong muốn khi mọi thứ được hiển thị trên màn hình. Tôi không chắc chắn nếu tôi đang sử dụng các móc vòng đời chính xác.

Answer 1

Con đường tôi đã nhận khoảng này cảm thấy hacky nhưng tôi không thể làm cho nó làm việc với cách tiếp cận ban đầu của tôi.

Đối với các trường ngày yêu cầu phạm vi động, tôi đã sử dụng chuỗi quy tắc kiểu chỉ thị và nối một thuộc tính được tính toán.

Ví dụ:

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>