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

Question

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

但是，我仍然看不到如何执行以下操作的清晰示例：

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

的验证器

1. 同时检查两个日期，以确保结束日期不早于开始日期
2. 有一个基于此的验证消息（aka：我们不希望一个字段的“开始日期不能早于结束日期”，而另一个字段的“结束日期不能早于开始日期”）< / li>

这种类型的功能（或使用其他字段中的其他字段值）基本上是核心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')
            }
        },

Answer 1

可以使用以下代码解决：

首先创建自定义验证器：

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

第二，在验证中调用验证器：

    endDate: {
      required,
      isAfterDate
    }