解决iview表单中时间选择起的验证失败问题

最新推荐文章于 2025-03-12 18:59:55 发布

原创最新推荐文章于 2025-03-12 18:59:55 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue.js 专栏收录该内容

46 篇文章

订阅专栏

本文介绍了在前端开发中如何使用日期选择器组件并设置不同类型的日期选择（如单个日期选择和日期范围选择）的有效性验证规则。通过具体的代码示例展示了如何实现这些验证逻辑。

1. type="datetime"的验证方式：

<DatePicker  v-model="form.chooseDate" placeholder="选择日期" type="datetime" format="yyyy-MM-dd"/>

chooseDate: [{required: true, message: '日期不能为空!', trigger: 'blur', pattern: /.+/}],

后面添加 pattern: /.+/可验证；

2. type="daterange"的验证方式：

<FormItem label="变更起止时间：" prop="modifyTimes">
           <DatePicker
                        v-model="form.modifyTimes"
                        format="yyyy-MM-dd"
                        type="daterange"
                        placement="bottom-end"
                        placeholder="请选择起止时间"
                        class="am-datepicker"
                        @on-change="getModifyTimes">
            </DatePicker>
</FormItem>

modifyTimes: [{
    type: 'array',
    required: true,
    fields: {
        0: {type: 'date', required: true, message: '请选择起止日期'},
        1: {type: 'date', required: true, message: '请选择起止日期'}
    }
}],