web-dev-qa-db-ja.com

Vee-カスタム日付検証を検証します

とにかく、終了日を開始日より短くすることができないvee-validateプラグインを使用してカスタム日付検証を記述できるかどうか疑問に思いました。私は高くも低くも見えましたが、これに対する明確な答えを見つけることができる場所はどこにもありません。

これを実装する方法がない場合は、それなしで実行できますが、現在、開始日のテンプレートに実装したものは次のとおりです。

<input type="text" id="startDate" name="startDate" class="form-control" v-model="startDate" v-validate="'required|date_format:DD-MM-YYYY'" :class="{'input': true, 'is-danger': errors.has('startDate') }">
    <label class="mb-0" for="startDate">Start Date</label>
        <span v-show="errors.has('startdate')" class="text-danger"><center>{{ errors.first('startdate') }}</center></span>

私のスクリプトは次のようになります。

    export default {
    name: 'App',
    data: () => ({
        task: '',
        startDate: '',
        startTime: '',
        endDate: '',
        endTime: '',
        description: 'test'
    }),
    methods: {
        validateBeforeSubmit() {
            this.$validator.validateAll().then((result) => {
                if (result) {
                // eslint-disable-next-line
                alert('Form Submitted!');
                return;
                }

                alert('Correct them errors!');
            });
        }
    }

};

しかし、表示されている検証はありません。スクリプトに何かが欠けていると思いますが、そこに日付を実装する方法がわかりません。どんな助けでも大歓迎です。

vue.jsvee-validate
3
bpp

コードにいくつかの問題があります。
まず、データを定義するために矢印関数を使用しないでください。次に、タイプミスの可能性がありますが、テンプレートではstartDateとstartdateを小文字で使用します。

あなたの質問に答えるために、vee-validateとの日付比較でカスタムバリデーターを定義することが可能です：

Vue.use(VeeValidate)

new Vue({
  el: "#app",
  data() {
    return {
      startDate: '',
      endDate: '',
    }
  },
  created() {
    let self = this
    this.$validator.extend('earlier', {
      getMessage(field, val) {
        return 'must be earlier than startDate'
      },
      validate(value, field) {
        let startParts = self.startDate.split('-')
        let endParts = value.split('-')
        let start = new Date(startParts[2], startParts[1] -1, startParts[0]) // month is 0-based
        let end = new Date(endParts[2], endParts[1] -1, endParts[0])

        return end > start
      }
    })
  },
  methods: {
    validateBeforeSubmit() {
      this.$validator.validateAll().then((result) => {
        if (result) {
          alert('Form Submitted!');
          return;
        }
        alert('Correct them errors!');
      });
    }
  }
})
.is-danger, .text-danger {
  color: red;
}
<script src="https://unpkg.com/[email protected]/dist/vee-validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
  <div>
    <input type="text" name="startDate" v-model="startDate"v-validate="'required|date_format:DD-MM-YYYY'" :class="{'input': true, 'is-danger': errors.has('startDate') }">
    <label class="mb-0" for="startDate">Start Date</label>
    <span v-show="errors.has('startDate')" class="text-danger">{{ errors.first('startDate') }}</span>
  </div>
  <div>
    <input type="text" name="endDate" v-model="endDate" v-validate="'required|date_format:DD-MM-YYYY|earlier'" :class="{'input': true, 'is-danger': errors.has('endDate') }">
    <label class="mb-0" for="endDate">End Date</label>
    <span v-show="errors.has('endDate')" class="text-danger">{{ errors.first('endDate') }}</span>  
  </div>

  <button @click="validateBeforeSubmit">Save</button>
</div>

注：この例では、作成したフック内にカスタムバリデーターを配置しましたが、プロジェクト内の任意のファイル内に配置できます。ドキュメントで推奨されているように、正しくインポートしてください。

3
Sovalina