Question

如果日期在特定日期之前或之后，如何使用VeeValidate v3和VueJs-DatePicker进行验证？

我正在使用： https://www.npmjs.com/package/vuejs-datepicker（最新）和 https://baianat.github.io/vee-validate/（版本3，不是2）

VeeValidate删除了其日期验证功能，指出规则易碎，效果不佳等。

所以我假设我需要创建自定义规则，但我真的不知道从哪里开始，可以使用帮助。

我正在将VueJS-DatePicker软件包用作日期选择器，并且正在通过“格式”属性使用自定义格式。

我的日期选择器代码

<datepicker
    v-model="inputVal"
    :class="{ 'has-errors': !!errors[0] }"
    :placeholder="placeholder"
    calendar-button
    calendar-button-icon="fal fa-calendar-alt"
    bootstrapStyling
    :typeable="true"
    :disabled-dates="disabledDates"
    :format="customFormatter"
></datepicker>

使用Moment格式化日期

customFormatter(date) {
    return moment(date).format('MM/DD/YYYY');
},

Answer 1

使用value

例如，这是我自己的自定义规则，用于检查集合中是否有足够的物品：

input是vee-validate中的一个值（不幸的是，input仅适用于min）
rules是ValidationProvider的{{1}}道具中分号后的值

    extend('minAmountItems', {
        validate: (value, { min }) => {
            return value >= min;
        },
        params: ['min'],
        message: '{_field_} should contains at least {min} items'
    });

用datepicker包裹ValidationProvider

例如，我用ValidationProvider包装了自己的组件：

HTML

    <ValidationProvider
        ref="editableListProvider"
        tag="div"
        rules="minAmountItems:2"
        v-slot="{errors,invalid}"
        name="Collection"
    >
        <!-- LINE BELOW IS VERY IMPORTANT. -->
        <!-- THIS INPUT VALUE GOES TO VALIDATE FUNCTION OR CUSTOM RULE -->
        <input type="text" :value="items.length" disabled v-show="false" />
        <div class="column add-item-column">
            <button @click="addItem">Add item</button>
        </div>
        <div class="column alert alert-danger" v-show="invalid">{{ errors[0] }}</div>
        <div class="column" v-for="(item, i) in items" :key="i">
            <div class="row as-row row-no-padding">
                <slot name="data" :data="{item, index: i}"></slot>
                <div class="column column-clear">
                    <button class="button-outline button-icon" @click="removeItem(i)">
                        <i class="la la-close"></i>
                    </button>
                </div>
            </div>
        </div>
    </ValidationProvider>

JS

        // another part of my component

        methods: {
            addItem() {
                this.$emit('editableList:itemAdded');

                this.$nextTick(async () => {
                    // LINE BELOW IS IMPORTANT, BECAUSE AUTOMATIC VALIDATE WORKS 
                    // ONLY ONCHANGE EVENT OF INPUT
                    this.$refs.editableListProvider.validate();
                });
            },
            removeItem(index) {
                this.$emit('editableList:itemRemoved', { index });

                this.$nextTick(async () => {
                    // LINE BELOW IS IMPORTANT, BECAUSE AUTOMATIC VALIDATE WORKS 
                    // ONLY ONCHANGE EVENT OF INPUT
                    this.$refs.editableListProvider.validate();
                });
            }

            // other my methods
        }

Answer 2

扩展@Barabas答案，以明确包括a）在给定日期之前b）momentJS库c）严格日期格式'MM/DD/YYYY'

import { extend } from "vee-validate";
import * as moment from 'moment';

const dateFormat = 'MM/DD/YYYY';

extend("before", {
  params: ["limit", "included"],
  validate: (value, { limit, included }) => {
    limit = moment(limit, dateFormat);
    value = moment(value, dateFormat);
    return included 
      ? value.isSameOrBefore(limit)
      : value.isBefore(limit);
  },
  message: (fieldName, placeholders) => {
    let limit = moment(placeholders.limit).format(dateFormat);
    return `The ${fieldName} field must come before ${limit}`;
  }});
}

并且没有时间（请注意，在将字符串用于Vue数据属性或limit参数时，用户浏览器中的不同本地化设置可能会导致时髦-我强烈建议您使用'YYYY-MM-如果使用字符串，则为DD'格式-当然，这不一定要向用户显示）

extend("before", {
  params: ["limit", "included", "displayTime"],
  validate: (value, { limit, included }) => {
    value = isNaN(value)
      ? Date.parse(value)
      : +value;
    limit = isNaN(limit)
      ? Date.parse(limit)
      : +limit;
    return included 
      ? value <= limit
      : value < limit;
  },
  message: (fieldName, placeholders) => {
    let limit = placeholders.limit instanceof Date
      ? placeholders.limit
      : new Date(placeholders.limit);
    limit = placeholders.displayTime
      ? limit.toLocaleString()
      : limit.toLocaleDateString();
    return `The ${fieldName} field must come before ${limit}`
  }});
}

如何在使用VeeValidate v3和vuejs-datepicker之前验证日期之后的日期？

2 个答案: