Vuelidate - 日期验证（比较日期，低于和高于）

Question

我有两个输入，用户可以选择两个日期，这两个日期允许用户选择产品在这两个日期期间是否是新的。我想使用 Vuelidate 验证这两个字段，并希望比较这两个日期以及更多这样做。但我似乎无法让它发挥作用。

我试图实现的验证：

New_from 字段

• 不能低于今天，也不能高于New_to 字段（因为这会颠倒字段的顺序）

新的

• 字段不能低于new_from的值

我尝试过的：

validations: {
            fields: {
                newFrom: {
                    required: requiredIf(function() {
                        return this.fields.newTo
                    }),
                    minValue: minValue(new Date()), // Make the minimal value today
                    maxValue: this.newTo ? this.newTo : null 
                },
                newTo: {
                    required: requiredIf(function() {
                        return this.fields.newFrom
                    }),
                    minValue: this.fields.newFrom, // But this does not work
                },

            },

        }

超文本标记语言

<div class="w-full flex-column">
  <input v-model.trim="$v.fields.newFrom.$model" type="date" name="new_from" id="new_from" v-on:change="alert('test')" :class="{'border-red-600': submitted && !$v.fields.newFrom.required}" class="appearance-none block border border-gray-200 p-2 rounded-md w-full shadow-sm focus:border-indigo-500 focus:outline-none" placeholder="">
  <p class="error text-red-600 my-3" v-if="submitted && !$v.fields.newFrom.required">New from is required!</p>
  <p class="error text-red-600 my-3" v-if="submitted && !$v.fields.newFrom.minValue">New from  cannot be lower than today</p>
  <p class="error text-red-600 my-3" v-if="submitted && !$v.fields.newFrom.maxValue">New from  cannot be higher than new_to</p>
</div>
<div class="mx-3 flex items-center justify-center">
  <p class="text-gray-900 font-medium">To</p>
</div>
<div class="w-full flex-column">
  <input v-model.trim="$v.fields.newTo.$model" type="date" name="new_to" id="new_to"  :class="{'border-red-600': submitted && !$v.fields.newTo.required}" class="appearance-none block border border-gray-200 p-2 rounded-md w-full shadow-sm focus:border-indigo-500 focus:outline-none" placeholder="">
  <p class="error text-red-600 my-3" v-if="submitted && !$v.fields.newTo.required">New to is required!</p>
  <p class="error text-red-600 my-3" v-if="submitted && !$v.fields.newTo.minValue">New to cannot be lower than new_from!</p>
</div>

我怎样才能做到这一点？在这种情况下，诸如此类的包Moment.js有用吗？

Answer 1

您可以检查自定义验证器，因为它帮助我了解 vuelidate。

您可以使用 vuelidate 中预定义的所需验证

import { required } from "vuelidate/lib/validators";
...
validations: {
fields: {
  newFrom: {
    required,
    minValue(val) {
      return new Date(val) > new Date();
    },
    maxValue(val, {newTo}){
      return new Date(newTo) > new Date(val);
    }
  },
  newTo: {
    required,
    minValue(val, { newFrom }) {
      return new Date(val) > new Date(newFrom);
    },
  },
},

可能有更好的方法来定义日期比较的逻辑，但我试图坚持你的观点。

Moment.js 对此可能有点大材小用，因为您可以进行基本的日期比较。否则，您也可以使用一个时刻插件时刻范围。然而，我坚信对于初学者来说，你必须尽可能保持简单。