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 相关文章推荐
在线编辑器的实现原理(兼容IE和FireFox)
Mar 09 Javascript
Use Word to Search for Files
Jun 15 Javascript
js 回车提交表单两种实现方法
Dec 31 Javascript
Javascript变量的作用域和作用域链详解
Apr 02 Javascript
JS中事件冒泡和事件捕获介绍
Dec 13 Javascript
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
Apr 28 Javascript
js验证身份证号码记录的方法
Apr 26 Javascript
jQuery中使用validate插件校验表单功能
May 24 jQuery
Element-ui中元素滚动时el-option超出元素区域的问题
May 30 Javascript
JavaScript设计模式之策略模式实现原理详解
May 29 Javascript
JavaScript/TypeScript 实现并发请求控制的示例代码
Jan 18 Javascript
js 数组 fill() 填充方法
Nov 02 Javascript
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输出时间差函数代码
2013/01/28 PHP
ThinkPHP的Widget扩展实例
2014/06/19 PHP
php自动更新版权信息显示的方法
2015/06/19 PHP
Zend Framework实现具有基本功能的留言本(附demo源码下载)
2016/03/22 PHP
php 的反射详解及示例代码
2016/08/25 PHP
利用switch语句进行多选一判断的实例代码
2016/11/14 PHP
jQuery使用手册之二 DOM操作
2007/03/24 Javascript
JQuery 无废话系列教程(二) jquery实战篇上
2009/06/23 Javascript
JavaScript闭包函数访问外部变量的方法
2014/08/27 Javascript
分享2个jQuery插件--jquery.fileupload与artdialog
2014/12/26 Javascript
jquery简单倒计时实现方法
2015/12/18 Javascript
微信小程序 富文本转文本实例详解
2016/10/24 Javascript
angularjs使用directive实现分页组件的示例
2017/02/07 Javascript
详谈js遍历集合(Array,Map,Set)
2017/04/06 Javascript
vue学习笔记之vue1.0和vue2.0的区别介绍
2017/05/17 Javascript
浅谈angularJS的$watch失效问题的解决方案
2017/08/11 Javascript
[js高手之路]寄生组合式继承的优势详解
2017/08/28 Javascript
jquery实现企业定位式导航效果
2018/01/01 jQuery
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
2018/08/16 Javascript
vue 界面刷新数据被清除 localStorage的使用详解
2018/09/16 Javascript
微信小程序wx:for循环的实例详解
2018/10/07 Javascript
ES6 迭代器与可迭代对象的实现
2019/02/11 Javascript
Python中的pass语句使用方法讲解
2015/05/14 Python
Python分支语句与循环语句应用实例分析
2019/05/07 Python
python在openstreetmap地图上绘制路线图的实现
2019/07/11 Python
python+selenium+chrome批量文件下载并自动创建文件夹实例
2020/04/27 Python
浅谈对python中if、elif、else的误解
2020/08/20 Python
CSS3的颜色渐变效果的示例代码
2017/09/29 HTML / CSS
加拿大著名时装品牌:SOIA & KYO
2016/08/23 全球购物
以实惠的价格轻松租车,免费取消:Easyrentcars
2019/07/16 全球购物
工商管理专业应届生求职信
2013/11/04 职场文书
《雨霖铃》听课反思
2014/02/13 职场文书
欢迎领导标语
2014/06/27 职场文书
党员群众路线对照检查材料思想汇报
2014/09/17 职场文书
导游词之蓬莱长岛
2019/12/17 职场文书
JS不要再到处使用绝对等于运算符了
2021/04/30 Javascript