動態(tài)添加表單項(xiàng)
iview的動態(tài)添加表單很簡單，只需設(shè)置好表單項(xiàng)為一個array，添加新項(xiàng)目的時候就push一個默認(rèn)好的值，剩下的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>
表單驗(yàn)證
iview的表單驗(yàn)證是通過在Form添加屬性 :rules="rulesValidate" ，rulesValidate是在methods里設(shè)置的方法。
添加一個title表單項(xiàng)和提交按鈕
<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) {
// 調(diào)用validate方法會執(zhí)行驗(yàn)證
this.$refs[form].validate(validate => {
// validate=true/false,驗(yàn)證成功與否
})
}，
}
表單驗(yàn)證：
rulesValidate: {
title: [
{
required: true,
message: "請?zhí)顚戄啿D名稱",
trigger: "blur"
},
{
type: "string",
max: 50,
message: "50個字以內(nèi)，中文/字母/數(shù)字/常用字符",
trigger: "change"
}
],
也可以寫成
title: [{{ required: true, message: "請?zhí)顚憟D片名稱", trigger: "blur"}}]
驗(yàn)證條件是一個數(shù)組，可以寫多個。如果需要自定義驗(yàn)證可以在data里面定義一個驗(yàn)證器
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("時間段不可重復(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)證表單動態(tài)項(xiàng)目里第一個子項(xiàng)目的value值，如果有3個子項(xiàng)需要重復(fù)寫3次，不知道有沒有更好的寫法？暫時先這樣。
showTimeDurationsJudge 是驗(yàn)證時間段重復(fù)的方法。
驗(yàn)證時間段是否重疊
先考慮如果是有2段時間如何驗(yàn)證？不考慮跨天的情況。
思考的結(jié)果是兩個時間段不重疊的充要條件就是
- 前面的一段時間（a1）的開始(start1)和結(jié)束時間(end1)都要在后面一段時間(a2)的開始時間（start2）之前
- 后面的一段時間（a2）的開始（start2）和結(jié)束時間（end2）都要在前面一段時間（a1）的結(jié)束時間（end1）之后
滿足上面條件就能保證兩段時間是完全錯開的。
因?yàn)榭丶o的時間是"00:00:00"這種格式的字符串，我引入moment這個庫來把字符串轉(zhuǎn)化為時間戳，時間戳可以比較大小。
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
}
到此這篇關(guān)于iview實(shí)現(xiàn)動態(tài)表單和自定義驗(yàn)證時間段重疊的文章就介紹到這了,更多相關(guān)iview表單驗(yàn)證內(nèi)容請搜索服務(wù)器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務(wù)器之家！
原文鏈接：https://segmentfault.com/a/1190000038910345
