如何创建自定义开始/结束日期 Vue 自定义验证器答案

【问题标题】：How to create custom start/end date Vue custom validator如何创建自定义开始/结束日期 Vue 自定义验证器
【发布时间】：2020-02-26 02:42:05
【问题描述】：

我正在尝试创建一个自定义 Vue 验证器。我查看了他们的文档https://vuelidate.netlify.com/#custom-validators，以及一个非常有用的教程https://vuejsdevelopers.com/2018/08/27/vue-js-form-handling-vuelidate/。

但是，我仍然没有看到如何执行以下操作的明确示例：

我有两个日期选择器输入字段，一个开始日期和结束日期。我希望能够创建一个验证器，它可以

同时检查两个日期以确保结束日期不早于开始日期
有一个基于此的验证消息（又名：我们不希望一个字段显示“开始日期不能早于结束日期”，而另一个字段显示“结束日期不能早于开始日期”）

这种类型的功能（或在不同的功能中使用其他字段值）基本上是核心 sameAs 验证器（见下文）所具有的：

    import { ref, withParams } from './common'
    export default (equalTo) =>
    withParams({ type: 'sameAs', eq: equalTo }, function(value, parentVm) {
      return value === ref(equalTo, this, parentVm)
    })

我试图模仿这个，但它不起作用......

    import { ref, withParams } from 'vuelidate/lib/validators/common.js'
    export default (endDate) =>
    withParams({ type: 'dateRange', eq: endDate }, function(value, parentVm) {
        console.log('parentVm', parentVm);
        return value < ref(endDate, this, parentVm)
    })

它甚至没有记录我的 console.log。这是调用它的代码

    <date-picker id="financial-start-date" v-model="$v.start_date.$model" :config="datepickerConfig"></date-picker>
    <date-picker id="financial-end-date" v-model="$v.end_date.$model" :config="datepickerConfig"></date-picker>

验证：

    validations: {
            transaction_id: {

            },
            start_date: {

            },
            end_date: {
                dateRange: dateRange('startDate')
            }
        },

【问题讨论】：

标签： vue.js vuelidate

【解决方案1】：

可以使用以下代码解决：

首先创建自定义验证器：

const isAfterDate = (value, vm) => {
    return new Date(value).getTime() > new Date(vm.startDate).getTime();
};

其次，在validations中调用validator：

    endDate: {
      required,
      isAfterDate
    }

【讨论】：