ivew 日期选择表单验证

最新推荐文章于 2023-11-29 16:09:53 发布

原创最新推荐文章于 2023-11-29 16:09:53 发布 · 286 阅读

1 ·

CC 4.0 BY-SA版权

ivew 同时被 2 个专栏收录

2 篇文章

订阅专栏

DatePicker

1 篇文章

订阅专栏

本文详细介绍了在前端开发中，如何使用日期选择器组件设置表单验证规则，包括单个日期选择和起止时间范围的选择，确保用户输入的有效性和用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<FormItem label="开始日期：" prop="beginTime">
    <DatePicker v-model="roleForm.beginTime" type="date" placeholder="Select date" class="w200"></DatePicker>
</FormItem>

beginTime: [{required: true, type: 'date',message: '请选择开始日期', trigger: 'blur'}], // type必须填写否则验证不过

上传不了

<FormItem label="起止时间：" prop="time">
    <DatePicker v-model="roleForm.time" placeholder="请选择起止时间" class="w200" type="daterange"></DatePicker>
</FormItem>

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