iview实现动态表单和自定义验证时间段重叠


Posted in Javascript onJanuary 10, 2021

动态添加表单项

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实现动态表单和自定义验证时间段重叠

表单验证

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 是验证时间段重复的方法。

iview实现动态表单和自定义验证时间段重叠

验证时间段是否重叠

先考虑如果是有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
}

到此这篇关于iview实现动态表单和自定义验证时间段重叠的文章就介绍到这了,更多相关iview表单验证内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jquery创建一个ajax关键词数据搜索实现思路
Feb 26 Javascript
JavaScript不刷新实现浏览器的前进后退功能
Nov 05 Javascript
JavaScript中清空数组的方法总结
Dec 02 Javascript
Angularjs为ng-click事件传递参数
Jun 15 Javascript
微信小程序之前台循环数据绑定
Aug 18 Javascript
vue与TypeScript集成配置最简教程(推荐)
Oct 17 Javascript
动态加载JavaScript文件的3种方式
May 05 Javascript
浅析js实现网页截图的两种方式
Nov 01 Javascript
vue input标签通用指令校验的实现
Nov 05 Javascript
Vue快速实现通用表单验证功能
Dec 05 Javascript
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 jQuery
基于JQuery和DWR实现异步数据传递
Oct 16 jQuery
JavaScript canvas实现文字时钟
Jan 10 #Javascript
JS代码实现页面切换效果
Jan 10 #Javascript
原生JavaScript实现购物车
Jan 10 #Javascript
JavaScript Html实现移动端红包雨功能页面
Jan 10 #Javascript
JS实现公告上线滚动效果
Jan 10 #Javascript
Vuex实现简单购物车
Jan 10 #Vue.js
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 #Vue.js
You might like
php入门学习知识点五 关于php数组的几个基本操作
2011/07/14 PHP
php文件上传你必须知道的几点
2015/10/20 PHP
PHP中FTP相关函数小结
2016/07/15 PHP
js的Prototype属性解释及常用方法
2014/05/08 Javascript
自己编写的支持Ajax验证的JS表单验证插件
2015/05/15 Javascript
jQuery插件jquery-barcode实现条码打印的方法
2015/11/25 Javascript
AngularJS 日期格式化详解
2015/12/23 Javascript
js简单判断移动端系统的方法
2016/02/25 Javascript
JS中dom0级事件和dom2级事件的区别介绍
2016/05/05 Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
2016/05/30 Javascript
JS获取当前使用的浏览器名字以及版本号实现方法
2016/08/19 Javascript
使用travis-ci如何持续部署node.js应用详解
2017/07/30 Javascript
详解Chart.js轻量级图表库的使用经验
2018/05/22 Javascript
使用react context 实现vue插槽slot功能
2019/07/18 Javascript
深入探索VueJS Scoped CSS 实现原理
2019/09/23 Javascript
python处理大数字的方法
2015/05/27 Python
python实现机器学习之元线性回归
2018/09/06 Python
python 提取key 为中文的json 串方法
2018/12/31 Python
使用OpenCV实现仿射变换—平移功能
2019/08/29 Python
python画微信表情符的实例代码
2019/10/09 Python
在pytorch中动态调整优化器的学习率方式
2020/06/24 Python
为什么说python更适合树莓派编程
2020/07/20 Python
Python如何实现线程间通信
2020/07/30 Python
如何在Canvas中添加事件的方法示例
2019/05/21 HTML / CSS
canvas如何实现多张图片编辑的图片编辑器
2020/03/10 HTML / CSS
本科生求职简历的自我评价
2013/10/21 职场文书
写给学生的新学期寄语
2014/01/18 职场文书
社区母亲节活动记录
2014/03/06 职场文书
演讲主持词
2014/03/18 职场文书
进口业务员岗位职责
2014/04/06 职场文书
乳制品整治工作方案
2014/05/29 职场文书
中学感恩教育活动总结
2015/05/05 职场文书
计划生育目标责任书
2015/05/09 职场文书
繁星春水读书笔记
2015/06/30 职场文书
学校隐患排查制度
2015/08/05 职场文书
初中历史教学反思
2016/02/19 职场文书