欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

iview實(shí)現(xiàn)動(dòng)態(tài)表單和自定義驗(yàn)證時(shí)間段重疊

 更新時(shí)間:2021年01月10日 16:42:58   作者:董志欽  
這篇文章主要介紹了iview實(shí)現(xiàn)動(dòng)態(tài)表單和自定義驗(yàn)證時(shí)間段重疊,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

動(dòng)態(tài)添加表單項(xiàng)

iview的動(dòng)態(tài)添加表單很簡(jiǎn)單,只需設(shè)置好表單項(xiàng)為一個(gè)array,添加新項(xiàng)目的時(shí)候就push一個(gè)默認(rèn)好的值,剩下的iview會(huì)幫你做好。

<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="'顯示時(shí)段' + (index + 1)"
   >
    <Row>
     <TimePicker
      type="timerange"
      v-model="item.value"
      placement="bottom-end"
      placeholder="選擇時(shí)間段"
      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">添加顯示時(shí)段</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>

表單驗(yàn)證

iview的表單驗(yàn)證是通過在Form添加屬性 :rules="rulesValidate" ,rulesValidate是在methods里設(shè)置的方法。

添加一個(gè)title表單項(xiàng)和提交按鈕

 <FormItem label="名稱" prop="title" style="width: 500px;">
    <Input v-model="formValidate.title" :disabled="isDisEdit" :placeholder="'請(qǐng)輸入輪播圖名稱(最多50個(gè)字符)'" 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) {
      // 調(diào)用validate方法會(huì)執(zhí)行驗(yàn)證
      this.$refs[form].validate(validate => {
        // validate=true/false,驗(yàn)證成功與否
      })
    },
  }

表單驗(yàn)證:

rulesValidate: {
  title: [
    {
      required: true,
      message: '請(qǐng)?zhí)顚戄啿D名稱',
      trigger: 'blur'
    },
    {
      type: 'string',
      max: 50,
      message: '50個(gè)字以內(nèi),中文/字母/數(shù)字/常用字符',
      trigger: 'change'
    }
  ],

也可以寫成

title: [{{ required: true, message: '請(qǐng)?zhí)顚憟D片名稱', trigger: 'blur'}}]

驗(yàn)證條件是一個(gè)數(shù)組,可以寫多個(gè)。如果需要自定義驗(yàn)證可以在data里面定義一個(gè)驗(yàn)證器

data() {
  const durationValitator = (rule, value, callback) => {
    if(this.isShowTimePicker && value.toString() === ',') {
      callback(new Error('請(qǐng)選擇顯示時(shí)間段'));
    }else if(value[0] === value[1]) {
      callback(new Error('請(qǐng)正確選擇時(shí)間段'))
    }else if(!showTimeDurationsJudge(this.formValidate.showTimeVOS)){
      callback(new Error('時(shí)間段不可重復(fù)'))
    }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, 這種寫法是表示驗(yàn)證表單動(dòng)態(tài)項(xiàng)目里第一個(gè)子項(xiàng)目的value值,如果有3個(gè)子項(xiàng)需要重復(fù)寫3次,不知道有沒有更好的寫法?暫時(shí)先這樣。

showTimeDurationsJudge 是驗(yàn)證時(shí)間段重復(fù)的方法。

驗(yàn)證時(shí)間段是否重疊

先考慮如果是有2段時(shí)間如何驗(yàn)證?不考慮跨天的情況。

思考的結(jié)果是兩個(gè)時(shí)間段不重疊的充要條件就是

  • 前面的一段時(shí)間(a1)的開始(start1)和結(jié)束時(shí)間(end1)都要在后面一段時(shí)間(a2)的開始時(shí)間(start2)之前
  • 后面的一段時(shí)間(a2)的開始(start2)和結(jié)束時(shí)間(end2)都要在前面一段時(shí)間(a1)的結(jié)束時(shí)間(end1)之后

滿足上面條件就能保證兩段時(shí)間是完全錯(cuò)開的。

因?yàn)榭丶o的時(shí)間是"00:00:00"這種格式的字符串,我引入moment這個(gè)庫來把字符串轉(zhuǎn)化為時(shí)間戳,時(shí)間戳可以比較大小。

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。在可以比較兩段時(shí)間之后,如果有更多時(shí)間段,就可以用循環(huán)的辦法比較,完整的代碼為:

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
}

到此這篇關(guān)于iview實(shí)現(xiàn)動(dòng)態(tài)表單和自定義驗(yàn)證時(shí)間段重疊的文章就介紹到這了,更多相關(guān)iview表單驗(yàn)證內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • vue-auto-focus: 控制自動(dòng)聚焦行為的 vue 指令方法

    vue-auto-focus: 控制自動(dòng)聚焦行為的 vue 指令方法

    今天小編就為大家分享一篇vue-auto-focus: 控制自動(dòng)聚焦行為的 vue 指令方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08
  • vue-router之實(shí)現(xiàn)導(dǎo)航切換過渡動(dòng)畫效果

    vue-router之實(shí)現(xiàn)導(dǎo)航切換過渡動(dòng)畫效果

    今天小編就為大家分享一篇vue-router之實(shí)現(xiàn)導(dǎo)航切換過渡動(dòng)畫效果,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2019-10-10
  • vue-router實(shí)現(xiàn)tab標(biāo)簽頁(單頁面)詳解

    vue-router實(shí)現(xiàn)tab標(biāo)簽頁(單頁面)詳解

    這篇文章主要為大家詳細(xì)介紹了vue-router實(shí)現(xiàn)tab標(biāo)簽頁的相關(guān)方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-10-10
  • Vue常見錯(cuò)誤Error?in?mounted?hook解決辦法

    Vue常見錯(cuò)誤Error?in?mounted?hook解決辦法

    這篇文章主要給大家介紹了關(guān)于Vue常見錯(cuò)誤Error?in?mounted?hook的解決辦法,出現(xiàn)這樣的問題,會(huì)發(fā)現(xiàn)跟聲明周期鉤子有關(guān)系,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-07-07
  • vue中keep-alive多級(jí)路由緩存問題

    vue中keep-alive多級(jí)路由緩存問題

    本文主要介紹了vue中keep-alive多級(jí)路由緩存問題,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-12-12
  • 在Vue中實(shí)現(xiàn)Excel導(dǎo)出功能(數(shù)據(jù)導(dǎo)出)

    在Vue中實(shí)現(xiàn)Excel導(dǎo)出功能(數(shù)據(jù)導(dǎo)出)

    本文分享了如何在前端導(dǎo)出Excel文件,強(qiáng)調(diào)了前端導(dǎo)出的即時(shí)性、便捷性、靈活性和定制化優(yōu)勢(shì),以及減輕后端服務(wù)器負(fù)擔(dān)的特點(diǎn),詳細(xì)介紹了ExcelJS和FileSaver.js兩個(gè)工具庫的使用方法和主要功能,最后通過Vue實(shí)現(xiàn)了Excel的導(dǎo)出功能
    2024-10-10
  • vue 使用 vue-pdf 實(shí)現(xiàn)pdf在線預(yù)覽的示例代碼

    vue 使用 vue-pdf 實(shí)現(xiàn)pdf在線預(yù)覽的示例代碼

    這篇文章主要介紹了vue 使用 vue-pdf 實(shí)現(xiàn)pdf在線預(yù)覽的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-04-04
  • Vuex unknown action type報(bào)錯(cuò)問題及解決

    Vuex unknown action type報(bào)錯(cuò)問題及解決

    這篇文章主要介紹了Vuex unknown action type報(bào)錯(cuò)問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-02-02
  • 在Vue.js中使用TypeScript的方法

    在Vue.js中使用TypeScript的方法

    這篇文章主要介紹了在Vue.js中使用TypeScript的方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-03-03
  • 淺談在不使用ssr的情況下解決Vue單頁面SEO問題(2)

    淺談在不使用ssr的情況下解決Vue單頁面SEO問題(2)

    這篇文章主要介紹了淺談在不使用ssr的情況下解決Vue單頁面SEO問題(2),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-11-11

最新評(píng)論