vue.js - 如何在使用 VeeValidate v3 和 vuejs-datepicker 之前验证日期之后/日期？

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

使用 extend 创建您的自定义规则

例如，这是我自己的自定义规则，用于检查集合中的项目是否足够:

value以下是来自 input 的值(不幸的是，vee-validate 仅适用于 input)

min是 rules 中分号后的值ValidationProvider 的 Prop

    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
        }