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

最新推荐文章于 2024-07-07 11:26:33 发布
最新推荐文章于 2024-07-07 11:26:33 发布
阅读量5k 收藏 4
点赞数 2
文章标签： vue  DatePicker
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：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: /.+/}],

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

qq_36165747
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
iview日期控件DatePicker设置不可选择的日期、不可选时间点
pqj222的博客
07-24 8042
近期要做一个预约功能，其中预约日期是有范围限制的，预约的时间点也是按后台配置起止时间的，这就需要前端将不需要的日期和时间设置为不可选择。 效果如下： 1、日期按照后台返回，控制能选择的日期。 2、时间的话，过滤了不可选时间。 这里使用的是iview的DatePicker组件，type为datetime 日期不可选通过options属性来控制， 时间不可选通过time-picke...
iview日期控件,已选日期，但是通不过validate验证
Jana Jing的分享
03-15 2515
&lt;Date-picker v-model="formValidate.acceptTime" type="datetime" placeholder="选择接收时间"&gt;&lt;/Date-picker&gt; 对日期进行多重验证,代码校验写成:(多重验证包括第一要验不能为空，第二要验证限制的一些长度，正则表达式等) acceptTime: [ { required: t...
iview中DatePicker日期选择器设置默认值
最新发布
wangshuai13383347132的博客
07-07 315
iview中DatePicker日期选择器设置默认值
iview日期控件,格式化后通不过validate验证
weixin_46010797的博客
01-05 419
百度了很多信息，发现差不多出奇的一致，问题已经解决，为了避免后来者受到其他错误解释的影响，写此文。 其他文章大都在强调pattern: /.+/的作用，举个例子： purchaseDate: [{required: true, message: '日期不能为空!', trigger: 'blur', pattern: /.+/}], 这里博主要说明的是，以上内容确实通过了验证，但是起作用的不是pattern，而是另一个隐藏的属性type。 如果你用的是官网的示例验证肯定会通过demo d..
iveiw 时间验证
weixin_43465508的博客
09-05 985
此时是因为 是拼合的两个的样式，所以要用的是array 中套的两个的验证方法。如果是datetime 类型。
Iview 时间日期选择器非空验证失败的解决方案
一捆铁树枝的博客
07-04 4048
在使用iview的时间日期选择组件时，需要进行非空验证，但是当选择好日期时间后，还是提示不能为空，后来查阅资料通过如下方法解决了； 1.在验证规则内添加 pattern: /.+/ ruleValidate: { startTime: [{ required: false, message: '起始时间不能为空', trigger: 'blur',pat...
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），来动态地调整可选的日期范围。例如，在开始时间选择器变化时，我们可以禁用结束时间选择器中早于开始时间的日期。同理，在结束...
iview 的 时间date-picker 为 datetimerange 和Select为value=“ “ 的验证问题
qq_33164351的博客
08-10 547
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仿有赞地址选择器
07-20
特别叼的全国地址选择器，支持省市区全选，以及多级多选。记得是iview2.0 （https://www.iviewui.com/）。下载新版，此版旧版存在一些性能bug
JS实现日期控件校验
二黑的博客
05-24 1393
1、概述 内置参数查询界面当中可进行一些数据校验，例如有两个参数：开始日期和结束日期，下面我们要校验的是：开始日期与结束日期不能为空，结束日期必须在开始日期之后以及结束日期必须在开始日期后的某个时间段内，否则提示相关信息，对此可以在查询按钮中增加事件。下面介绍下具体的设置。 具体效果图如下： 具体错误见效果图报错警告。 2、判断开始时间与结束时间是否为空 给查询按钮增加点击事件，具体...
iview校验表单----必填选项失败
xuan的博客
04-24 4424
1.问题：设置的是必填，明明有数据却总是显示校验错误。 原因：用iview自带的表单验证时，一直验证不通过，因为iview默认校验数据类型为String，而的表单是其他数据类型所以一直验证不通过。 解决：添加校验的对应数据类型即可。如我的数据类型是数组则设置为 type:'array'（数组类型） 其他的有：type:'number' （数字类型） type: 'data'（日期类型...
iview 中日期组件 ( DatePicker ) 校验缺陷问题
weixin_43735788的博客
05-23 5181
** 具体解决方案如下 ** 过程不是太详细，只做参考 假设该组件在使用时可进行数据的 添加 和 编辑 <Button type="primary" @click="addDate">添加</Button> <Button type="primary" @click="editDate">编辑</Button> <Modal :ti...
iview中树形控件的使用
weixin_34293911的博客
03-22 5310
近期由于项目中的需要，在admin端使用到了iview中的树形控件，个人觉得用起来还不错，今天在这里分享一下，写得仓促，有部分地方未来得及优化， 有不足之处希望及时指正。下面贴效果图：代码部分：1.首先是标签<Tree :data="treeData" :render="renderContent" class="trees" empty-text="暂无分类..." @on-togg...
vue.js-地址选择插件
董小礼的博客
05-24 4206
第一步自然是安装        npm install v-distpicker --savetest.vue        import VDistpicker from 'v-distpicker' export default {  components: { VDistpicker } }        &lt;v-distpicker&gt;&lt;/v-distpicker&gt;写...
iview 日期控件类型type=“datetimerange“ 表单校验规则
11-29 5816
1.需求描述 编辑页面需要做日期控件类型type="datetimerange"的表单校验 2.使用场景 规则管理--》编辑弹窗表单校验 3.问题描述 日期控件类型type="datetimerange"或者 type="daterange" 的表单校验不提示错误信息 4.解决思路 修改规则，代码如方案 5.解决方案 (已解决加入) <Form-item label=...
挖坑指南：iView表单 日期校验出错
weixin_39015132的博客
11-02 5018
前言 表单数据的验证在前端是很有必要的，它是数据的第一道过滤。可以避免一些错误的发生 开始 先看看我们的使用 虽然iView的官方已经更新到3.0的版本了，但是目前项目中使用的还是2.0的版本。 官方的文档：http://v2.iviewui.com/components/form 实践 对照看了官方的文档，使用方式是相同的，字段也是没有问题滴。校验为啥就会报错呢？仔细地对照...
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` 数组中可以定义多个快捷选项。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值