0

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

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

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

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

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

1 回答 1

0

可以使用以下代码解决：

首先创建自定义验证器：

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

其次，在验证中调用验证器：

    endDate: {
      required,
      isAfterDate
    }
于 2020-06-21T14:49:16.857 回答