Проверка коллекции форм с датами и строкой - Vuelidate - PullRequest
Новая
       39

Проверка коллекции форм с датами и строкой - Vuelidate

0 голосов
/ 04 ноября 2019

Я пытаюсь проверить ряд дат чем-то вроде этого. 

const data = [
    {begin: new Date('2019-12-01'), place: '2'},
    {begin: new Date('2019-12-03'), place: '3'}
    ... more values
];
// Elements inside data can be added or removed but will have at least one.

Здесь data[1][begin] должно быть больше или равно data[0][begin], а data[1][place] должно , а не равно data[0][place]. Есть ли способ добиться этого? Документация говорит о динамической валидации, но я не уверен, как мне этого добиться с помощью коллекции.

1 Ответ

0 голосов
/ 04 ноября 2019

Можно рассмотреть возможность реализации пользовательской проверки в прослушивателе событий отправки формы.

Это может быть достигнуто путем циклического просмотра массива объектов и сравнения элементов в парах.

HTML 

<form
     id="app"
     @submit="checkForm"  
     action="/someurl"
     method="post"
   >
  <table border="1">
    <tr v-for="(item,index) in dates" :key="index">
        <td>
          {{index}}
        </td>
        <td>
          {{formatDate(item.begin)}}
        </td>
        <td>
          {{item.place}}
        </td>
    </tr>
  </table>
     <input type="date" v-model="dateEntry"/>
     <input type="text" v-model="placeEntry"/>
     <button type="button" @click="addEntry">Add</button>
   <p>
   <br>
    <input
      type="submit"
      value="Submit"
    >
    </p>

    <p v-for="error in errorList">
         {{error}}
    </p>

   </form>

JS 

new Vue({
  el: "#app",
  data: {
    errorList: [],
    dateEntry: null,
    placeEntry: null,
    dates: [
      {begin: new Date('2019-12-01'), place: '2'},
        {begin: new Date('2019-12-03'), place: '3'}
    ]
  },
  methods: {
    addEntry: function(){    
        if(this.dateEntry == null || this.dateEntry == "")
        return false;

      if(this.placeEntry == "")
        return false;

      this.dates.push({
        begin: new Date(this.dateEntry),
        place: this.placeEntry
      });

      this.dateEntry = null;
      this.placeEntry= "";

    },
    checkForm: function(e){

        var isValid = true;
        var index = 0;
        var nextIndex = 1;
      this.errorList = [];

        while(nextIndex < this.dates.length){

          if(nextIndex < this.dates.length){
                var isValidDate = this.validDate(this.dates[nextIndex].begin,this.dates[index].begin);
              var isValidPlace = this.validPlace(this.dates[nextIndex].place,this.dates[index].place);

              if(!isValidDate){
                this.errorList.push("Invalid date on index " + nextIndex);
              }  

              if(!isValidPlace){
                this.errorList.push("Invalid place on index " + nextIndex);
              }  
          } 
          index++;
          nextIndex++;
            }

      if(!this.errorList.length){
        this.errorList.push("All dates are valid");
        return true;
      }  

        e.preventDefault();
    },
    formatDate: function(date){
            return date.toDateString();
    },
    validPlace: function(curPlace, prevPlace){
        return curPlace != prevPlace;
    },
    validDate: function(curDate,prevDate){
        try{
            return curDate.getTime() >= prevDate.getTime();
      }catch(e){
        return false;
      }  
    }
  }
})

Проверьте эту JS Fiddle , которую я создал, чтобы проиллюстрировать мое предложение.

С другой стороны, если вы создаете массив во время выполнения, вы можете применить проверку до того, как он будет добавлен в массив.

...