• 售前

  • 售后

热门帖子
入门百科

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

[复制链接]
123457399 显示全部楼层 发表于 2021-10-25 19:06:07 |阅读模式 打印 上一主题 下一主题
动态添加表单项

iview的动态添加表单很简单,只需设置好表单项为一个array,添加新项目标时间就push一个默认好的值,剩下的iview会帮你做好。
  1. <template lang="html">
  2. <div class="">
  3.     <Form
  4.       ref="formValidate"
  5.       :model="formValidate"
  6.       :rules="rulesValidate"
  7.       :label-width="100"
  8.       :label-colon="true"
  9.     >
  10.    <FormItem
  11.     v-for="(item, index) in formValidate.showTimeDurations"
  12.     :key="index"
  13.     :prop="'showTimeDurations[' + index + '].value'"
  14.     :label="'显示时段' + (index + 1)"
  15.    >
  16.     <Row>
  17.      <TimePicker
  18.       type="timerange"
  19.       v-model="item.value"
  20.       placement="bottom-end"
  21.       placeholder="选择时间段"
  22.       style="width: 400px;"
  23.       :disabled="isDisEdit"
  24.       ></TimePicker>
  25.      <Button shape="circle" icon="md-close" @click="handleRemove(index)" style="margin-left: 10px;"></Button>
  26.     </Row>
  27.    </FormItem>
  28.    <FormItem style="width: 500px;" v-if="formValidate.showTimeDurations.length < 3">
  29.     <Button type="dashed" long @click="handleAddDuration" icon="md-add">添加显示时段</Button>
  30.    </FormItem>
  31.    </Form>
  32. </div>
  33. </template>
  34. <script>
  35. export default {
  36. name: 'banner_new',
  37. data() {
  38.   return {
  39.    formValidate: {
  40.     showTimeDurations: [{value: ['','']}]
  41.    }
  42.   }
  43. },
  44. methods: {
  45.   handleAddDuration() {
  46.    this.formValidate.showTimeDurations.push({value: ['','']})
  47.   },
  48.   handleRemove(index) {
  49.    this.formValidate.showTimeDurations.splice(index, 1)
  50.   }
  51. }
  52. }
  53. </script>
  54. <style lang="css" scoped>
  55. </style>
复制代码

表单验证

iview的表单验证是通过在Form添加属性
  1. :rules="rulesValidate"
复制代码
,rulesValidate是在methods里设置的方法。
添加一个title表单项和提交按钮
  1. <FormItem label="名称" prop="title" style="width: 500px;">
  2.     <Input v-model="formValidate.title" :disabled="isDisEdit" :placeholder="'请输入轮播图名称(最多50个字符)'" maxlength="50" show-word-limit></Input>
  3.   </FormItem>
  4.   ...
  5.   <Row type="flex" justify="start" style="margin-top: 20px;">
  6.     <Button type="primary" style="width: 100px; margin-left: 20px;" v-if="isCanSave" @click="handleSubmit('formValidate')">保存</Button>
  7.   </Row>
复制代码
  1.   methods: {
  2.     handleSubmit(form) {
  3.       // 调用validate方法会执行验证
  4.       this.$refs[form].validate(validate => {
  5.         // validate=true/false,验证成功与否
  6.       })
  7.     },
  8.   }
复制代码
表单验证:
  1. rulesValidate: {
  2.   title: [
  3.     {
  4.       required: true,
  5.       message: '请填写轮播图名称',
  6.       trigger: 'blur'
  7.     },
  8.     {
  9.       type: 'string',
  10.       max: 50,
  11.       message: '50个字以内,中文/字母/数字/常用字符',
  12.       trigger: 'change'
  13.     }
  14.   ],
复制代码
也可以写成
  1. title: [{{ required: true, message: '请填写图片名称', trigger: 'blur'}}]
复制代码
验证条件是一个数组,可以写多个。如果须要自定义验证可以在data内里定义一个验证器
  1. data() {
  2.   const durationValitator = (rule, value, callback) => {
  3.     if(this.isShowTimePicker && value.toString() === ',') {
  4.       callback(new Error('请选择显示时间段'));
  5.     }else if(value[0] === value[1]) {
  6.       callback(new Error('请正确选择时间段'))
  7.     }else if(!showTimeDurationsJudge(this.formValidate.showTimeVOS)){
  8.       callback(new Error('时间段不可重复'))
  9.     }else {
  10.       callback()
  11.     }
  12.   };
  13.   const durationValidate = [{ validator: durationValitator, trigger: 'blur' }];
  14.   return {
  15.     rulesValidate: {
  16.       'showTimeDurations[0].value': durationValidate,
  17.       'showTimeDurations[1].value': durationValidate,
  18.       'showTimeDurations[2].value': durationValidate,
  19.     }
  20.   }
  21. }
复制代码
  1. 'showTimeDurations[0].value': durationValidate,
复制代码
这种写法是表示验证表单动态项目里第一个子项目标value值,如果有3个子项须要重复写3次,不知道有没有更好的写法?暂时先这样。
  1. showTimeDurationsJudge
复制代码
是验证时间段重复的方法。

验证时间段是否重叠

先考虑如果是有2段时间怎样验证?不考虑跨天的情况。
思考的效果是两个时间段不重叠的充要条件就是
      
  • 前面的一段时间(a1)的开始(start1)和竣事时间(end1)都要在反面一段时间(a2)的开始时间(start2)之前  
  • 反面的一段时间(a2)的开始(start2)和竣事时间(end2)都要在前面一段时间(a1)的竣事时间(end1)之后
满足上面条件就能保证两段时间是完全错开的。
因为控件给的时间是"00:00:00"这种格式的字符串,我引入moment这个库来把字符串转化为时间戳,时间戳可以比力大小。
  1. const judge = (a1,a2) => {
  2. let result = false
  3.   const start1 = moment(a1[0],"HH:mm:ss").valueOf()
  4.   const end1 = moment(a1[1],"HH:mm:ss").valueOf()
  5.   const start2 =moment(a2[0],"HH:mm:ss").valueOf()
  6.   const end2 = moment(a2[1],"HH:mm:ss").valueOf()
  7.   if(start1 == start2) {
  8.     return false
  9.   }else if(start1 > start2) {
  10.     result = start1 > end2
  11.   }else {
  12.     result = end1 < start2
  13.   }
  14.   return result
  15. }
复制代码
如果有重叠就返回false,没有重叠返回true。在可以比力两段时间之后,如果有更多时间段,就可以用循环的办法比力,完备的代码为:
  1. 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) => {
  2. let result = false
  3.   const start1 = moment(a1[0],"HH:mm:ss").valueOf()
  4.   const end1 = moment(a1[1],"HH:mm:ss").valueOf()
  5.   const start2 =moment(a2[0],"HH:mm:ss").valueOf()
  6.   const end2 = moment(a2[1],"HH:mm:ss").valueOf()
  7.   if(start1 == start2) {
  8.     return false
  9.   }else if(start1 > start2) {
  10.     result = start1 > end2
  11.   }else {
  12.     result = end1 < start2
  13.   }
  14.   return result
  15. }
复制代码
到此这篇关于iview实现动态表单和自定义验证时间段重叠的文章就先容到这了,更多相干iview表单验证内容请搜刮草根技术分享从前的文章或继承欣赏下面的相干文章渴望大家以后多多支持草根技术分享!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作