iview实现动态表单和自定义验证时间段重叠
作者:董志钦 发布时间:2023-07-02 17:09:28
动态添加表单项
iview的动态添加表单很简单,只需设置好表单项为一个array,添加新项目的时候就push一个默认好的值,剩下的iview会帮你做好。
<template lang="html">
<div class="">
<Form
ref="formValidate"
:model="formValidate"
:rules="rulesValidate"
:label-width="100"
:label-colon="true"
>
<FormItem
v-for="(item, index) in formValidate.showTimeDurations"
:key="index"
:prop="'showTimeDurations[' + index + '].value'"
:label="'显示时段' + (index + 1)"
>
<Row>
<TimePicker
type="timerange"
v-model="item.value"
placement="bottom-end"
placeholder="选择时间段"
style="width: 400px;"
:disabled="isDisEdit"
></TimePicker>
<Button shape="circle" icon="md-close" @click="handleRemove(index)" style="margin-left: 10px;"></Button>
</Row>
</FormItem>
<FormItem style="width: 500px;" v-if="formValidate.showTimeDurations.length < 3">
<Button type="dashed" long @click="handleAddDuration" icon="md-add">添加显示时段</Button>
</FormItem>
</Form>
</div>
</template>
<script>
export default {
name: 'banner_new',
data() {
return {
formValidate: {
showTimeDurations: [{value: ['','']}]
}
}
},
methods: {
handleAddDuration() {
this.formValidate.showTimeDurations.push({value: ['','']})
},
handleRemove(index) {
this.formValidate.showTimeDurations.splice(index, 1)
}
}
}
</script>
<style lang="css" scoped>
</style>
表单验证
iview的表单验证是通过在Form添加属性 :rules="rulesValidate"
,rulesValidate是在methods里设置的方法。
添加一个title表单项和提交按钮
<FormItem label="名称" prop="title" style="width: 500px;">
<Input v-model="formValidate.title" :disabled="isDisEdit" :placeholder="'请输入轮播图名称(最多50个字符)'" maxlength="50" show-word-limit></Input>
</FormItem>
...
<Row type="flex" justify="start" style="margin-top: 20px;">
<Button type="primary" style="width: 100px; margin-left: 20px;" v-if="isCanSave" @click="handleSubmit('formValidate')">保存</Button>
</Row>
methods: {
handleSubmit(form) {
// 调用validate方法会执行验证
this.$refs[form].validate(validate => {
// validate=true/false,验证成功与否
})
},
}
表单验证:
rulesValidate: {
title: [
{
required: true,
message: '请填写轮播图名称',
trigger: 'blur'
},
{
type: 'string',
max: 50,
message: '50个字以内,中文/字母/数字/常用字符',
trigger: 'change'
}
],
也可以写成
title: [{{ required: true, message: '请填写图片名称', trigger: 'blur'}}]
验证条件是一个数组,可以写多个。如果需要自定义验证可以在data里面定义一个验证器
data() {
const durationValitator = (rule, value, callback) => {
if(this.isShowTimePicker && value.toString() === ',') {
callback(new Error('请选择显示时间段'));
}else if(value[0] === value[1]) {
callback(new Error('请正确选择时间段'))
}else if(!showTimeDurationsJudge(this.formValidate.showTimeVOS)){
callback(new Error('时间段不可重复'))
}else {
callback()
}
};
const durationValidate = [{ validator: durationValitator, trigger: 'blur' }];
return {
rulesValidate: {
'showTimeDurations[0].value': durationValidate,
'showTimeDurations[1].value': durationValidate,
'showTimeDurations[2].value': durationValidate,
}
}
}
'showTimeDurations[0].value': durationValidate,
这种写法是表示验证表单动态项目里第一个子项目的value值,如果有3个子项需要重复写3次,不知道有没有更好的写法?暂时先这样。
showTimeDurationsJudge
是验证时间段重复的方法。
验证时间段是否重叠
先考虑如果是有2段时间如何验证?不考虑跨天的情况。
思考的结果是两个时间段不重叠的充要条件就是
前面的一段时间(a1)的开始(start1)和结束时间(end1)都要在后面一段时间(a2)的开始时间(start2)之前
后面的一段时间(a2)的开始(start2)和结束时间(end2)都要在前面一段时间(a1)的结束时间(end1)之后
满足上面条件就能保证两段时间是完全错开的。
因为控件给的时间是"00:00:00"这种格式的字符串,我引入moment这个库来把字符串转化为时间戳,时间戳可以比较大小。
const judge = (a1,a2) => {
let result = false
const start1 = moment(a1[0],"HH:mm:ss").valueOf()
const end1 = moment(a1[1],"HH:mm:ss").valueOf()
const start2 =moment(a2[0],"HH:mm:ss").valueOf()
const end2 = moment(a2[1],"HH:mm:ss").valueOf()
if(start1 == start2) {
return false
}else if(start1 > start2) {
result = start1 > end2
}else {
result = end1 < start2
}
return result
}
如果有重叠就返回false,没有重叠返回true。在可以比较两段时间之后,如果有更多时间段,就可以用循环的办法比较,完整的代码为:
import moment from 'moment'
export const showTimeDurationsJudge = (durations) => {
let judgeResult = true
if(durations && durations.length > 1) {
for(let i=0;i< durations.length-1;i++){
for(let j=i+1;j < durations.length; j++) {
judgeResult = judgeResult && judge(durations[i].value,durations[j].value)
}
}
}
return judgeResult
}
const judge = (a1,a2) => {
let result = false
const start1 = moment(a1[0],"HH:mm:ss").valueOf()
const end1 = moment(a1[1],"HH:mm:ss").valueOf()
const start2 =moment(a2[0],"HH:mm:ss").valueOf()
const end2 = moment(a2[1],"HH:mm:ss").valueOf()
if(start1 == start2) {
return false
}else if(start1 > start2) {
result = start1 > end2
}else {
result = end1 < start2
}
return result
}
来源:https://segmentfault.com/a/1190000038910345
猜你喜欢
- 效果如图 一、获取天气def getWeather1(city): try:
- 一、出现原因:readline模块没有安装二、解决方式:# 安装readline模块yum -y install readline-deve
- 用Dreamweaver制作网页时,如果插入的图片、GIF动画、声音、视频或链接的网页是用中文命名的,在用IE浏览器浏览时可能显示不出来。以
- 今天在使用Pycharm的时候,由于文件过多,我对目录下的文件做了归类,改动了一些文件的路径,结果后来执行的时候,出现了路径找不到的错误.新
- 异常对象Python中遇到错误后,会引发异常。Python中使用异常对象来表示异常情况。如果异常对象未被处理或者捕捉,程序就会用所谓的回溯(
- 这可能是一个非常简单的问题,但是今天花一点点时间把这个简单的问题在说清晰一点,相信大家对CSS的学习和认识会很有帮助,强化一些概念的东西,对
- 前言:网上找的地铁线路图大多数都不太清晰,而且有水印,对本人这种视力不好的人来说看起来是真的不方便。所以能不能制作属于自己的地铁线路图呢?好
- 利用这个小游戏可以学习一下ython3.3中tkinter的使用方法# -*- coding: utf-8 -*-import tkinte
- --sql语句就用下面的存储过程 /*--数据导出Excel导出查询中的数据到Excel,包含字段名,文件为真正的Excel文件,如果文件不
- 本文对于先前系列文章中实现的C/Python代码统计工具(CPLineCounter),通过C扩展接口重写核心算法加以优化,并与网上常见的统
- 1、使用SHOW语句找出在服务器上当前存在什么数据库:mysql> SHOW DATABASES; +----------+
- 1. 先介绍几个常用的 MySQL 函数RAND() 随机生成 0~1 之间的小数(0<1)CEI
- 前言最近找几个老友准备聊天发现几个已经被删除好友名单,做为潜水党多年的我已经不知道成为多少人的黑名单,但是好友列表却依然有不是好友的名单,面
- 读《论语》,子张十九,子夏曰:博学而笃志,切问而近思,仁在其中矣。 博学:架构需要广度,要尽量多学习各方面的知识。笃志:除了广度,架构师还需
- input()作用:让用户从控制台输入一串字符,按下回车后结束输入,并返回字符串注意:很多初学者以为它可以返回数字,其实是错的!>&g
- 前言:今天就开始讲Python中的模块篇了,模块是Python的重要组成部分,Python之所以可以写出多种多样的程序,其实跟模块的灵活运用
- 大部分情况下,这种动态生成的sql查询语句写法如下: 代码如下:select A表.字段1,A表.字段2,B表.字段返回,C表.字段返回 f
- 导语每日游戏更新系列——今天带大家来看看扫雷小游戏!它是许多人接触到的第一款游戏,大概也是广大办公族和无网学生无聊时消遣的最佳游戏。在那些还
- -- begin auth.inc -- <?php $
- 一、概述前提:已安装 Python,如下图所示:1.1 检查是否已配置成功(选)1. 打开运行窗口 (1) 快捷键