검증 규칙을 필드에 프로그래밍 방식으로 첨부합니다.

검증 규칙을 필드에 프로그래밍 방식으로 첨부합니다.

Vue.js로 작성된 폼에 대한 검증을 위해 VeValidate를 사용하고 있습니다.에러가 발생한 입력에 관한 에러 메시지와 함께 스팬을 표시하도록 설정했습니다.

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

모든 입력은 같은 방법으로 설정되어 있으며 모두 올바르게 동작하고 있습니다.이 문제는 오늘로부터 1년을 최대값으로 사용하는 날짜 사이의 규칙을 필요로 하는 위의 입력에 유효성 검사 규칙을 추가하려고 할 때 발생합니다.

date_between:{min,max}

그v-validateAtribute는 다음 문자로 구분된 검증 규칙의 문자열을 받아들입니다.|Vue 인스턴스에 자동으로 연결된 검증자 인스턴스를 통해 규칙을 동적으로 추가하는 방법이 있습니다.

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

아래 코드를 '작성'된 라이프 사이클 후크와 '장착된' 라이프 사이클 후크 모두에서 실행하려고 했지만 원하는 결과를 얻지 못했습니다.

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

번거로운 점은 콘솔(크롬)을 사용하여 코드를 삽입하면 화면에 모든 내용이 렌더링되면 원하는 결과를 얻을 수 있기 때문에 코드가 작동합니다.올바른 라이프 사이클 훅을 사용하고 있는지 잘 모르겠습니다.

내가 이 문제를 해결하는 방법은 해킹처럼 느껴지지만, 나는 내 원래 접근 방식으로는 그것이 작동시킬 수 없었다.

동적 범위가 필요한 날짜 필드의 경우 지시 스타일 규칙 문자열을 사용하여 계산된 속성을 연결했습니다.

예를 들어 다음과 같습니다.

  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>

언급URL : https://stackoverflow.com/questions/42864347/attach-validation-rule-to-form-field-programmatically