如何在具有规则的 Vuejs 中使用 vuetify 验证 vue-ctk-date-time-picker？答案

【问题标题】：How to Validate vue-ctk-date-time-picker using vuetify in Vuejs with rules?如何在具有规则的 Vuejs 中使用 vuetify 验证 vue-ctk-date-time-picker？
【发布时间】：2022-01-14 20:47:56
【问题描述】：

我正在尝试使用 :rules 为 vue-ctk-date-time-picker 应用所需的验证。

它适用于其他元素但不适用于with vue-ctk-date-time-picker

请纠正我。

这是我正在尝试的脚本

dateTimePickerRules: [(v) => !!v || 'This Field is required'],



<vue-ctk-date-time-picker
    id="RangeDatePicker"
    v-model="tempInterpreterProjectDate"
    classname="form-control"
    color="dodgerblue"
    :only-date="true"
    :no-shortcuts="true"
    format="YYYY-MM-DD"
    formatted="ddd, MM/DD/YYY"
    :range="true"
    :rules="dateTimePickerRules"
    @input="selectedInterperateDate"
></vue-ctk-date-time-picker>

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

我已成功验证vue-ctk-date-time-picker 如下。

<ValidationObserver ref="dateTimeRef">
    <ValidationProvider
        v-slot="{ errors }"
        name="Date/time"
        rules="required"
    >
        <vue-ctk-date-time-picker
        id="RangeDatePicker"
        v-model="tempInterpreterProjectDate"
        classname="form-control"
        color="dodgerblue"
        :only-date="true"
        :no-shortcuts="true"
        format="YYYY-MM-DD"
        formatted="ddd, MM/DD/YYY"
        :error-messages="errors"
        :range="true"
        @input="selectedInterperateDate"
        ></vue-ctk-date-time-picker>
        <span class="v-messages theme--light error--text">{{
        errors[0]
        }}</span>
    </ValidationProvider>
</ValidationObserver>

我正在验证类似这样的字段

// it will return eithter true or false
const isDateTimeValid = await this.$refs.dateTimeRef.validate()

【讨论】：

【解决方案2】：

vue-ctk-date-time-picker 不是 Vuetify 组件。没有像rules 这样的property。您需要实现自定义验证，例如在表单提交时（检查tempInterpreterProjectDate 是否有值）

【讨论】：

感谢您的回复。我已经找到解决方案并在下面回答