iview日期控件,已选选点日期，但是通不过validate验证

最新推荐文章于 2024-07-07 11:26:33 发布

qq_36165747

最新推荐文章于 2024-07-07 11:26:33 发布

阅读量5k

点赞数 2

文章标签： vue DatePicker

本文链接：https://blog.csdn.net/qq_36165747/article/details/82343727

版权

解决办法：

模板html

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

正常的操作。重点在于验证那块验证需要添加的一点代码

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

添加蓝色部分代码即可完美通过验证。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

qq_36165747

关注关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

iview 的时间date-picker 为 datetimerange 和Select为value=“ “ 的验证问题

qq_33164351的博客

08-10

549

1.iview的 Select下拉框的时候,数据验证必填,选择了数据,却一直提示验证不能通过 <Form :model="formData" ref="formValidate" :rules="ruleValidate" <FormItem label="请选择类型" prop="depttype" label-position="top"> <Select v-model="formData.depttype" value="formData.depttype"&g

iview日期控件DatePicker设置不可选择的日期、不可选时间点

pqj222的博客

07-24

8072

近期要做一个预约功能，其中预约日期是有范围限制的，预约的时间点也是按后台配置起止时间的，这就需要前端将不需要的日期和时间设置为不可选择。效果如下： 1、日期按照后台返回，控制能选择的日期。 2、时间的话，过滤了不可选时间。这里使用的是iview的DatePicker组件，type为datetime 日期不可选通过options属性来控制，时间不可选通过time-picke...

2 条评论您还未登录，请先登录后发表或查看评论

iview日期控件,已选日期，但是通不过validate验证

Jana Jing的分享

03-15

2518

<Date-picker v-model="formValidate.acceptTime" type="datetime" placeholder="选择接收时间"></Date-picker> 对日期进行多重验证,代码校验写成:(多重验证包括第一要验不能为空，第二要验证限制的一些长度，正则表达式等) acceptTime: [ { required: t...

iview中DatePicker日期选择器设置默认值

最新发布

wangshuai13383347132的博客

07-07

360

iview中DatePicker日期选择器设置默认值

iview日期控件,格式化后通不过validate验证

weixin_46010797的博客

01-05

421

百度了很多信息，发现差不多出奇的一致，问题已经解决，为了避免后来者受到其他错误解释的影响，写此文。其他文章大都在强调pattern: /.+/的作用，举个例子： purchaseDate: [{required: true, message: '日期不能为空!', trigger: 'blur', pattern: /.+/}], 这里博主要说明的是，以上内容确实通过了验证，但是起作用的不是pattern，而是另一个隐藏的属性type。如果你用的是官网的示例验证肯定会通过demo d..

iview datepicker type datetimerange校验问题

zyqgt960812的博客

11-22

911

iview datepicker datetimerange validate

iview日期控件,双向绑定日期格式的方法

08-27

在Vue.js框架中，iView是一个非常流行的UI组件库，提供了丰富的前端界面元素，包括日期控件(DatePicker)。在开发过程中，有时我们需要对日期格式进行特定的处理，特别是实现双向绑定时，确保数据在视图和模型之间...

iview3-date-range:iview的日期选择控件，做了日期范围的限制，可自定义可选的间隔2个与、3个月等

04-10

【iview3-date-range】是基于Vue2和iview UI库的一个扩展，它为iview的日期选择器组件增加了日期范围限制的功能，并且允许用户自定义可以选择的日期间隔，如每2个月或3个月等。这个特性使得在处理日期选择时更加灵活...

Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能

10-18

通过iView的日期选择器组件，我们可以通过监听选择器的变化事件（比如@on-change），来动态地调整可选的日期范围。例如，在开始时间选择器变化时，我们可以禁用结束时间选择器中早于开始时间的日期。同理，在结束...

iveiw 时间验证

weixin_43465508的博客

09-05

998

此时是因为是拼合的两个的样式，所以要用的是array 中套的两个的验证方法。如果是datetime 类型。

Iview 时间日期选择器非空验证失败的解决方案

一捆铁树枝的博客

07-04

4060

在使用iview的时间日期选择组件时，需要进行非空验证，但是当选择好日期时间后，还是提示不能为空，后来查阅资料通过如下方法解决了； 1.在验证规则内添加 pattern: /.+/ ruleValidate: { startTime: [{ required: false, message: '起始时间不能为空', trigger: 'blur',pat...

(五) ： iview 时间选择器，校验不成功

达拉崩巴斑得贝迪卜多比鲁翁_

03-23

761

错误的校验 <FormItem :label="$t('开始时间')" prop="template_benefit_info[0].start_date" :rules="{ required: true, message: $t('请选择开始时间'), trigger: 'change'}"> <DatePicker format="yyyy-MM-dd HH:m.

iview 的 date-picker 为 daterange 的验证解决方法

dadao2003的博客

09-05

3052

rules: { date: [{ type: 'array', required: true, fields: { 0: {type: 'date', required: true, message: '请输入起止日期'}, 1: {type: 'date', r...

挖坑指南：iView表单日期校验出错

weixin_39015132的博客

11-02

5024

前言表单数据的验证在前端是很有必要的，它是数据的第一道过滤。可以避免一些错误的发生开始先看看我们的使用虽然iView的官方已经更新到3.0的版本了，但是目前项目中使用的还是2.0的版本。官方的文档：http://v2.iviewui.com/components/form 实践对照看了官方的文档，使用方式是相同的，字段也是没有问题滴。校验为啥就会报错呢？仔细地对照...

iview 日期范围选择校验

m_uncle的博客

01-04

3046

如果时选择单个的日期，正常的写法没有问题，但是type='daterange'选择时间范围的校验就会出现问题了，解决的办法：

iviewUI 时间选择器限制

weixin_30772105的博客

03-10

426

<FormItem> <Col span="12"> 创建时间： <Date-picker @on-change="formData.startTime=$event" :options="startTimeOptions" v-model="formData.startTime" type="date" placeholde...

关于iview日期组件的代码案例

黄小堆

09-27

6199

前言：最近在做项目，也是刚开始工作没多久，对于iview框架不是很熟悉。因为做项目要用到日期选择器，所以想着写完了，做个笔记记录一下。有什么错误的地方欢迎大家提出来。 1、我开发使用的是vue，所以关于vue项目安装这一块，大家可以在网上找。详细代码如下： <template> //这里我使用的是iview框架的日期选择器 <FormItem label="...

iview DatePicker 日期选择器(type="daterange"时) 表单验证

a1224842990的专栏

08-15

4604

上周开始也遇到了类似的问题，但是最后还是没有百分百解决，今天花了一上午的时间反正算是解决了。网上是看了好几篇都没有用处，自己试了一下倒是可以了首先是关于DOM部分 <FormItem label="年度范围" prop="dates"> <DatePicker :value="sfaFinancialFormData....

iview 时间控件_iview和element中日期选择器快捷选项的定制控件

05-24

在 iView 和 element 中，日期选择器的快捷选项是可以自定义的。下面分别介绍一下 iView 和 element 中如何进行快捷选项的定制。 ## iView 时间控件 iView 中的时间控件是基于 [vue-datepicker](https://www.npmjs.com/package/vue-datepicker) 进行封装的。在 iView 中，可以通过 `picker-options` 属性来进行快捷选项的定制。例如，下面的代码会在日期选择器中添加一个“上个月”选项： ```html <DatePicker type="daterange" :picker-options="pickerOptions"></DatePicker> ``` ```javascript data() { return { pickerOptions: { shortcuts: [{ text: '上个月', onClick(picker) { const end = new Date(); const start = new Date(); start.setMonth(end.getMonth() - 1); picker.$emit('pick', [start, end]); } }] } } } ``` 其中，`shortcuts` 数组中可以定义多个快捷选项。 ## element 中日期选择器 element 中的日期选择器是基于 [vue-datepicker](https://www.npmjs.com/package/vue-datepicker) 进行封装的。在 element 中，可以通过 `shortcuts` 属性来进行快捷选项的定制。例如，下面的代码会在日期选择器中添加一个“上个月”选项： ```html <el-date-picker v-model="date" type="daterange" :shortcuts="shortcuts"> </el-date-picker> ``` ```javascript data() { return { date: '', shortcuts: [{ text: '上个月', onClick(picker) { const end = new Date(); const start = new Date(); start.setMonth(end.getMonth() - 1); picker.$emit('pick', [start, end]); } }] } } ``` 其中，`shortcuts` 数组中可以定义多个快捷选项。