Пользовательская проверка выбора даты в VueJS Element-UI

Question

Я использую Element-UI date picker, и я хотел бы установить пользовательскую проверку после того, как мой сервер подтвердит правильность выбранной даты.

<div class="form-row">
    <label class="form-label" for="date">Date</label>
    <el-date-picker class="NewReminder__date-picker"
        v-model="dateobj"
        type="date">
    </el-date-picker>
</div>

Любая подсказка о том, каксделай это?Apprecaite

Answer 1

Вы можете использовать Руководство по пользовательскому интерфейсу элемента: Правило проверки пользовательской формы ,

проверьте демонстрацию в выше руководства ,

вам нужно создать одно правило, затем внутри обработчика правила вызовите callback() в случае успеха или callback(new Error('something...')) в случае ошибки после ответа сервера на результат проверки.

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

new Vue({
  el: "#app",
  data () {
    return {
    dateobj: null,
    hasError: false,
    loading: false
    }
  },
  watch: {
    dateobj: function (newVal) {
      this.loading = true
      this.hasError = false
      setTimeout(()=>{
        this.hasError = Math.random() > 0.5 ? true : false
        this.loading = false
      }, 1500)
    }
  }
})

@import url("//unpkg.com/element-ui@2.4.6/lib/theme-chalk/index.css");
.my-error {
  background-color:red;
  color:white;
}
.lds-circle {
  display: inline-block;
  background: gray;
  animation: lds-circle 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
@keyframes lds-circle {
  0%, 100% {
    animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
  }
  0% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(1800deg);
    animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
  }
  100% {
    transform: rotateY(3600deg);
  }
}

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.4.6/lib/index.js"></script>
<div id="app">
<div class="form-row">
    <label class="form-label" for="date">Date</label>
    <el-date-picker class="NewReminder__date-picker" 
        v-model="dateobj"
        type="date"
        :readonly="loading">
    </el-date-picker>
    <span class="my-error" v-if="hasError">the server return one error</span>
    <span class="lds-circle" v-if="loading">loading</span>
</div>
</div>