Dynamically adding form itemsiview's dynamic form addition is very simple. You just need to set the form items to an array, and push a default value when adding a new item. iview will do the rest for you. <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="'Show time period' + (index + 1)" > <Row> <TimePicker type="timerange" v-model="item.value" placement="bottom-end" placeholder="Select a time period" 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">Add display period</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> Form Validation iview's form validation is done by adding the attribute Add a title form item and submit button <FormItem label="Name" prop="title" style="width: 500px;"> <Input v-model="formValidate.title" :disabled="isDisEdit" :placeholder="'Please enter the name of the slideshow (up to 50 characters)'" 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')">Save</Button> </Row> methods: { handleSubmit(form) { // Calling the validate method will perform validation this.$refs[form].validate(validate => { // validate=true/false, whether the verification is successful or not}) }, } Form Validation: rulesValidate: { title: { required: true, message: 'Please fill in the name of the slideshow', trigger: 'blur' }, { type: 'string', max: 50, message: 'Within 50 characters, Chinese/letters/numbers/common characters', trigger: 'change' } ], It can also be written as title: [{{ required: true, message: 'Please fill in the image name', trigger: 'blur'}}] The verification condition is an array and multiple conditions can be written. If you need custom validation, you can define a validator in data data() { const durationValitator = (rule, value, callback) => { if(this.isShowTimePicker && value.toString() === ',') { callback(new Error('Please select the display time period')); }else if(value[0] === value[1]) { callback(new Error('Please select the correct time period')) }else if(!showTimeDurationsJudge(this.formValidate.showTimeVOS)){ callback(new Error('Time period cannot be repeated')) }else { callback() } }; const durationValidate = [{ validator: durationValitator, trigger: 'blur' }]; return { rulesValidate: { 'showTimeDurations[0].value': durationValidate, 'showTimeDurations[1].value': durationValidate, 'showTimeDurations[2].value': durationValidate, } } } Verify that time periods overlapFirst consider how to verify if there are 2 periods of time? The situation of crossing days is not considered. The result of thinking is that the necessary and sufficient condition for two time periods not to overlap is
Meeting the above conditions can ensure that the two time periods are completely staggered. Because the time given by the control is a string in the format of "00:00:00", I introduced the moment library to convert the string into a timestamp, which can be compared in size. 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 } If there is overlap, it returns false; if there is no overlap, it returns true. After being able to compare two time periods, if there are more time periods, you can use a loop to compare them. The complete code is: 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 } This concludes this article about how iview implements dynamic forms and custom verification time period overlap. For more relevant iview form verification content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: JavaScript canvas text clock
>>: jQuery implements accordion effects
history route History mode refers to the mode of ...
WebRTC, which stands for Web Real-Time Communicat...
Recently, I encountered the need to embed a player...
In the following example, when the width of the td...
To master: localStorage, component encapsulation ...
1. Create a centos7.6 system and optimize the sys...
In cells, dark border colors can be defined indiv...
Preface MySQL officially refers to prepare, execu...
SQL finds all duplicate records in a table 1. The...
The first method: Use Junge's one-click scrip...
Table of contents Overview Global hook function R...
The vertically adjacent edges of two or more bloc...
When building a database and writing a program, i...
Today, there is such a requirement. If the logged...
1. Rendering JD Effect Simulation Effect 2. Princ...