iview DatePicker 校验

当日期类型为一段区间（type=“daterange”）时，页面挂载后validDate的值为[’’,’’]，所以表单验证需要对数组的每一个元素进行分开验证，并且验证的类型为type: ‘date’。

<template><div><Form ref="form" :model="formData" :rules="formRules" :label-width="110"><FormItem label="有效期" required prop="validDate"><DatePicker v-model="formData.validDate" type="daterange" split-panels style="width: 100%" @on-change="handleValidDateChange"></DatePicker></FormItem></Form></div>
</template>
<script>data(){return {formData: {validDate: []},formRules: {validDate: [{type: 'array', required: true,fields: {0: {type: 'date', required: true, message: '请输入有效期', trigger: 'blur'},1: {type: 'date', required: true, message: '请输入有效期', trigger: 'blur'}}}]}};},methods: {handleValidDateChange(value){this.formData.validDateStart = value[0];this.formData.validDateEnd = value[1];},}
</script>

tips：页面挂载后validDate的值为[’’,’’]，但如果form表单用于弹窗或其他类控件时，在使用时需要重新初始化数据，那么需要将validDate的值依然初始化[’’,’’]才会正常走验证，否则
1、若初始化为[]，页面不会重新刷新，则走自带的验证validDate is required，这是需要将验证规则改为：

validDate: [{type: 'array', required: true, message: '请输入有效期', trigger: 'blur'
}]

2、若直接将formDate初始化{}，不单独定义validDate的值，则validDate的值为undefined，不会走验证，一直为验证通过。

iview DatePicker 校验相关推荐

iview日期选择器更改显示日期书_如何动态设置 iview DatePicker 控件的禁用日期（option）...
在公司开发的过程中遇到的问题,我们采用了iview的Vue框架. 现有一个需求:用户在初始时页面后,DatePicker 的可选时间范围不作限制,用户可选择任意一天.当用户选择了某一天(planTim ...
iview组件安装、加载，以及关于iview的校验规则和相关校验函数
安装iview 1.安装依赖 (1) 从node.js官网下载并安装node,安装过程很简单,一直点下一步就ok了,安装完之后,我们通过打开命令行工具(win+R),输入node -v 命令,查看no ...
iview DatePicker日期组件禁止选择今天之后的日期不包括今天
1.日期组件 <DatePicker type="date" :options="options" placeholder="请选择日期&quo ...
iview DatePicker 结束时间改为23:59:59
<DatePicker type="datetimerange"ref="DatePicker"v-model="formInline.sear ...
iview 表单验证问题 Select 已经选择还是弹验证提示
问题:iview 的 Select 下拉框的时候,数据验证必填,明明选择了数据,却一直提示验证不能通过 html代码: <Form ref="FormData" :model ...
iviewui DatePicker 日期选择器限制选取时间跨度
需求: 当前日期是 2022年4月27日,要求当天后的日期不可选,选中的日期跨度是4天,比如我选13号,13号前四天后四天是可选的,其余都不可选. vue + ivewUI <DatePick ...
vue 表单验证常见问题
表单验证可以采用两种方式: 一.整个表单定义一个验证规则: 例如:标注为加粗的必须设置 <Form ref="formUser" :model="formUser& ...
便宜的数据库_您会为了便宜的娱乐而放弃多少数据
便宜的数据库 Given the flurry of activity around privacy in the media these days, it's difficult to argue ...
关于iview、element-ui重置表单并清除校验的方法
平时在使用iview或者vue重置表单是时,我会习惯使用 this.$refs[formData].resetFields(); 但是直接这样写上去方法是不起作用的, 内容必须要在每个form-ite ...

iview DatePicker 校验

iview DatePicker 校验

iview DatePicker 校验相关推荐

最新文章

热门文章