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 相关文章推荐
IE8 引入跨站数据获取功能说明
Jul 22 Javascript
javascript jQuery插件练习
Dec 24 Javascript
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
Apr 06 Javascript
JQuery动态创建DOM、表单元素的实现代码
Aug 09 Javascript
一样的table?不一样的table(可编辑状态table)
Sep 19 Javascript
JavaScript数组方法大全(推荐)
Jul 05 Javascript
JS获取填报扩展单元格控件的值的解决办法
Jul 14 Javascript
微信小程序实现topBar底部选择栏效果
Jul 20 Javascript
vue3.0 CLI - 2.1 -  component 组件入门教程
Sep 14 Javascript
微信小程序云开发实现增删改查功能
May 17 Javascript
layui radio点击事件实现input显示和隐藏的例子
Sep 02 Javascript
Vue学习之axios的使用方法实例分析
Jan 06 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 不同编码下的字符串长度区分
2009/09/26 PHP
php设计模式之策略模式应用案例详解
2019/06/17 PHP
HTML中不支持静态Expando的元素的问题
2007/03/08 Javascript
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
2013/03/24 Javascript
使用js获取地址栏中传递的值
2013/07/02 Javascript
JS、CSS加载中的小问题探讨
2013/11/26 Javascript
利用a标签自动解析URL分析网址实例
2014/10/20 Javascript
js中数组排序sort方法的原理分析
2014/11/20 Javascript
什么是 AngularJS?AngularJS简介
2014/12/06 Javascript
NodeJS中利用Promise来封装异步函数
2015/02/25 NodeJs
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
2017/02/17 Javascript
解决webpack打包速度慢的解决办法汇总
2017/07/06 Javascript
javascript编程开发中取色器及封装$函数用法示例
2017/08/09 Javascript
jQuery EasyUI开发技巧总结
2017/09/26 jQuery
什么是Vue.js框架 为什么选择它?
2017/10/17 Javascript
JS实现碰撞检测的方法分析
2018/01/19 Javascript
nodejs简单读写excel内容的方法示例
2018/03/16 NodeJs
手把手带你封装一个vue component第三方库
2019/02/14 Javascript
antd中table展开行默认展示,且不需要前边的加号操作
2020/11/02 Javascript
Vue实现todo应用的示例
2021/02/20 Vue.js
Python实现程序的单一实例用法分析
2015/06/03 Python
python绘制散点图并标记序号的方法
2018/12/11 Python
python安装pil库方法及代码
2019/06/25 Python
pyinstaller参数介绍以及总结详解
2019/07/12 Python
Python闭包与装饰器原理及实例解析
2020/04/30 Python
加拿大拼图大师:Puzzle Master
2020/12/28 全球购物
市场部专员岗位职责
2013/11/30 职场文书
先进集体事迹材料
2014/02/17 职场文书
学习2014年全国两会心得体会
2014/03/12 职场文书
自我检讨报告
2015/01/28 职场文书
食堂采购员岗位职责
2015/04/03 职场文书
2015年初一班主任工作总结
2015/05/13 职场文书
2015年暑假生活总结
2015/07/13 职场文书
如何用PHP websocket实现网页实时聊天
2021/05/26 PHP
学会Python数据可视化必须尝试这7个库
2021/06/16 Python
Python 数据可视化之Bokeh详解
2021/11/02 Python