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

【问题标题】：Vuelidate — Date validation (Compare dates, lower and higher than)Vuelidate - 日期验证（比较日期，低于和高于）
【发布时间】：2021-05-28 10:10:41
【问题描述】：

我有两个输入，用户可以在其中选择两个日期，这两个日期允许用户选择产品在这两个日期内是否是新产品。我想使用 Vuelidate 验证这两个字段，并想比较这两个日期等等。但我似乎无法让它工作。

我想要实现的验证：

New_from 字段

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

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

            },

        }

HTML

<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 这样的包在这种情况下有用吗？

【问题讨论】：

标签： javascript vue.js date vuelidate

【解决方案1】：

您可以查看custom validators，因为它帮助我了解 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 对此可能有点矫枉过正，因为您可以进行基本的日期比较。否则有一个矩插件moment-range你也可以使用。但是，我坚信对于初学者来说，您必须尽可能保持简单。

【讨论】：