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 相关文章推荐
prototype Element学习笔记(篇一)
Oct 26 Javascript
JavaScript游戏之优化篇
Nov 08 Javascript
javascript 正则表达式相关应介绍
Nov 27 Javascript
php图像生成函数之间的区别分析
Dec 06 Javascript
javascript打开word文档的方法
Apr 16 Javascript
jQuery实现跟随鼠标运动图层效果的方法
Feb 02 Javascript
Jquery解析json字符串及json数组的方法
May 29 Javascript
javascript中checkbox使用方法简单实例演示
Nov 17 Javascript
AngularJS基础 ng-list 指令详解及示例代码
Aug 02 Javascript
BootStrap Typeahead自动补全插件实例代码
Aug 10 Javascript
JavaScript 栈的详解及实例代码
Jan 22 Javascript
深入理解vue中slot与slot-scope的具体使用
Jan 26 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
非常好用的Zend Framework分页类
2014/06/25 PHP
用 Composer构建自己的 PHP 框架之构建路由
2014/10/30 PHP
一个符号插入器 中用到的js代码
2007/09/04 Javascript
利用JS实现浏览器的title闪烁
2013/07/08 Javascript
jQuery表格插件datatables用法总结
2014/09/05 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
2015/02/23 Javascript
深入学习JavaScript中的原型prototype
2015/08/13 Javascript
jquery衣服颜色选取插件效果代码分享
2015/08/28 Javascript
js操作cookie保存浏览记录的方法
2015/12/25 Javascript
JSON字符串和JSON对象相互转化实例详解
2017/01/05 Javascript
Angular 4 依赖注入学习教程之FactoryProvider的使用(四)
2017/06/04 Javascript
js微信分享实现代码
2020/10/11 Javascript
JavaScript实现开关等效果
2017/09/08 Javascript
基于JavaScript实现五子棋游戏
2020/08/26 Javascript
Angular项目从新建、打包到nginx部署全过程记录
2017/12/09 Javascript
微信小程序图片轮播组件gallery slider使用方法详解
2018/01/31 Javascript
nodejs使用node-xlsx生成excel的方法示例
2019/08/22 NodeJs
nodeJs的安装与npm全局环境变量的配置详解
2020/01/06 NodeJs
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
2020/07/27 Javascript
JavaScript中的执行环境和作用域链
2020/09/04 Javascript
python mysqldb连接数据库
2009/03/16 Python
python实现AES加密与解密
2019/03/28 Python
Django app配置多个数据库代码实例
2019/12/17 Python
pytorch读取图像数据转成opencv格式实例
2020/06/02 Python
美国温暖商店:The Warming Store
2018/12/15 全球购物
八皇后问题,输出了所有情况,不过有些结果只是旋转了90度
2016/08/15 面试题
公司行政经理岗位职责
2013/12/24 职场文书
委托书的写法
2014/08/30 职场文书
妈妈再爱我一次观后感
2015/06/08 职场文书
汽车修理厂管理制度
2015/08/05 职场文书
《角的度量》教学反思
2016/02/18 职场文书
python爬虫--selenium模块
2021/03/31 Python
python实现股票历史数据可视化分析案例
2021/06/10 Python
Vue过滤器(filter)实现及应用场景详解
2021/06/15 Vue.js
Mysql开启外网访问
2022/05/15 MySQL
Mysql表数据比较大情况下修改添加字段的方法实例
2022/06/28 MySQL