iview實現(xiàn)動態(tài)表單和自定義驗證時間段重疊
更新時間：2021年01月10日 16:42:58 作者：董志欽
這篇文章主要介紹了iview實現(xiàn)動態(tài)表單和自定義驗證時間段重疊，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
動態(tài)添加表單項
iview的動態(tài)添加表單很簡單，只需設置好表單項為一個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的表單驗證是通過在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方法會執(zhí)行驗證
this.$refs[form].validate(validate => {
// validate=true/false,驗證成功與否
})
}，
}
表單驗證：
rulesValidate: {
title: [
{
required: true,
message: '請?zhí)顚戄啿D名稱',
trigger: 'blur'
},
{
type: 'string',
max: 50,
message: '50個字以內，中文/字母/數(shù)字/常用字符',
trigger: 'change'
}
],
也可以寫成
title: [{{ required: true, message: '請?zhí)顚憟D片名稱', trigger: 'blur'}}]
驗證條件是一個數(shù)組，可以寫多個。如果需要自定義驗證可以在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, 這種寫法是表示驗證表單動態(tài)項目里第一個子項目的value值，如果有3個子項需要重復寫3次，不知道有沒有更好的寫法？暫時先這樣。
showTimeDurationsJudge 是驗證時間段重復的方法。
驗證時間段是否重疊
先考慮如果是有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。在可以比較兩段時間之后，如果有更多時間段，就可以用循環(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
}
到此這篇關于iview實現(xiàn)動態(tài)表單和自定義驗證時間段重疊的文章就介紹到這了,更多相關iview表單驗證內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關文章
vue-auto-focus: 控制自動聚焦行為的 vue 指令方法
今天小編就為大家分享一篇vue-auto-focus: 控制自動聚焦行為的 vue 指令方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
今天小編就為大家分享一篇vue-router之實現(xiàn)導航切換過渡動畫效果，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
vue-router實現(xiàn)tab標簽頁（單頁面）詳解
這篇文章主要為大家詳細介紹了vue-router實現(xiàn)tab標簽頁的相關方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
Vue常見錯誤Error?in?mounted?hook解決辦法
這篇文章主要給大家介紹了關于Vue常見錯誤Error?in?mounted?hook的解決辦法,出現(xiàn)這樣的問題,會發(fā)現(xiàn)跟聲明周期鉤子有關系,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2023-07-07
本文主要介紹了vue中keep-alive多級路由緩存問題，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-12-12
在Vue中實現(xiàn)Excel導出功能(數(shù)據(jù)導出)
本文分享了如何在前端導出Excel文件,強調了前端導出的即時性、便捷性、靈活性和定制化優(yōu)勢,以及減輕后端服務器負擔的特點,詳細介紹了ExcelJS和FileSaver.js兩個工具庫的使用方法和主要功能,最后通過Vue實現(xiàn)了Excel的導出功能2024-10-10
vue 使用 vue-pdf 實現(xiàn)pdf在線預覽的示例代碼
這篇文章主要介紹了vue 使用 vue-pdf 實現(xiàn)pdf在線預覽的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-04-04
Vuex unknown action type報錯問題及解決
這篇文章主要介紹了Vuex unknown action type報錯問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
這篇文章主要介紹了在Vue.js中使用TypeScript的方法，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-03-03
這篇文章主要介紹了淺談在不使用ssr的情況下解決Vue單頁面SEO問題(2)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11