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
猜你喜欢
- 建立随机生成的HTML代码是一件相当容易实现的ASP特性。你可能创建过“每日一帖”、滚动广告等等,只需要稍加点缀就会令你的网站日久弥新。对存
- JS脚本语言的基础语法:输出语法 alert("警告!"); confirm("确定吗
- 在进行单个爬虫抓取的时候,我们不可能按照一次抓取一个url的方式进行网页抓取,这样效率低,也浪费了cpu的资源。目前python上面进行并发
- 近来武汉肺炎肆虐全国,大多人的日常应该是宅在家里。出于好奇,笔者想用Python来绘制中国2020肺炎疫情地图。本代码采用Python3,需
- 一.请求后台的时候,服务端对每一个请求都会验证权限,而前端也需要对服务器返回的特殊状态码统一处理,所以可以针对业务封装请求。首先我们通过re
- string 对象 1、str.match(RegExp) 在str中搜索匹配RegExp的字符串并保存在一个数组内返回, 如果RegExp
- 本文实例讲述了Python Django框架实现应用添加logging日志。分享给大家供大家参考,具体如下:Django uses Pyth
- 本教程中将详细阐述传统的图形设计元素是如何应用在现代(2.0时代)的页面设计中的,然后我将解释为什么它们能流行开来,以及如何、何时、在哪里使
- 搜索是大数据领域里常见的需求。Splunk和ELK分别是该领域在非开源和开源领域里的领导者。本文利用很少的Python代码实现了一个基本的数
- 本文实例为大家分享了MySQL安装及配置远程登录教程,供大家参考,具体内容如下一.安装MySQL一.安装MySQL1. sudo apt-g
- 我们在使用GPU资源进行训练的时候,可能会发生资源耗尽的情况,那么在在这种情况,我们需要对GPU的资源进行合理的安排,具体使用办法如下:框架
- 以豆瓣为例,访问https://www.douban.com/contacts/list 来查看自己关注的人,要登录才能查看。如果用requ
- 前段时间为准备百度面试恶补的东西,虽然最后还是被刷了,还是把那几天的“战利品”放点上来,算法一直是自己比较薄弱的地方,以后还要更加努力啊。下
- mysql蠕虫复制,简单来说就是将查询出来的数据不断的新增插入到指定的数据表中。通常情况,mysql蠕虫复制时用来测试表压力。下面我们就结合
- 博主最近试在服务器上进行spark编程,因此,在开始编程作业之前,要先搭建一个便利的编程环境,这样才能做到舒心地开发。本文主要有以下内容:1
- 在最近工作中,有一个需求,需要做一个表格,并且对该表格右键弹出菜单支持增删改,这里做下总结,功能截图如下:首先定义菜单结构<!-- 菜
- 前言在学习Flask框架的蓝图时,遇到导包时用到了`from . 模块 import 对象`,然后试了试直接 import会报错,直接告诉我
- 语法:ROW_NUMBER() OVER(PARTITION BY COLUMN ORDER BY COLUMN)简单的说ROW_NUMBE
- 引子之前在学习Django时,对状态保持这个概念很模糊,不知道怎么去保持,通过什么去实现保持都不太清楚;稍微花了一点时间,把状态保持的基本概
- 我们来编写一个,引用时用:<!--#include Virtual="page.inc"-->语句即可:pa