iview-动态表单和自定义验证时间段重叠

时间：2023-04-01 12:21:47 vue.js

动态添加表单项iview的动态添加表单很简单，只需要将表单项设置为数组，添加新项时push一个默认值，剩下的如下iview将帮助您做好工作。添加显示周期

表单验证iview的表单验证是通过给Form添加一个属性：rules="rulesValidate"，rulesValidate是methods中设置的方法添加一个标题表单项和提交按钮'请输入轮播名称（最多50个字符）'"maxlength="50"show-word-limit>...

Savemethods:{handleSubmit(form){//调用验证方法将执行验证this.$refs[form].validate(validate=>{//validate=true/false,验证成功并否})},}Formvalidation:rulesValidate:{title:[{required:true,message:'请填写轮播图name',trigger:'blur'},{type:'string',max:50,message:'50个字符以内，中文/字母/数字/常用字符',triggerr:'change'}],也可以写成title:[{{required:true,message:'请填写图片名称',trigger:'blur'}}]验证条件是一个数组，你可以写多个如果需要自定义验证，可以在数据中定义验证器data(){constdurationValitator=(rule,value,callback)=>{if(this.isShowTimePicker&&value.toString()===','){callback(newError('请选择显示时间段'));}elseif(value[0]===value[1]){callback(newError('请选择正确的时间段'))}elseif(!showTimeDurationsJudge(this.formValidate.showTimeVOS)){callback(newError('时间段不能重复'))}else{callback()}};constdurationValidate=[{validator:durationValitator,trigger:'blur'}];返回{rulesValidate:{'showTimeDurations[0].value':durationValidate,'showTimeDurations[1].value':durationValidate,'showTimeDurations[2].value':durationValidate,}}}'showTimeDurations[0].value':durationValidate，这种写法是表示验证表单动态项中第一个子项的值。如果有3个子项，则需要写3遍。有没有更好的写法？就这样吧。showTimeDurationsJudge是验证时间段是否重复的方法。验证时间段是否重叠，首先考虑如何验证是否有两个时间段？不考虑跨日的情况。思考的结果是，两个时间段不重叠的充要条件是前一个时间段（a1）的开始时间（start1）和结束时间（end1）必须早于下一个时间段的开始时间（start2）后段时间(a2)一段时间(a2)的开始时间(start2)和结束时间(end2)必须在上一段时间(a1)的结束时间(end1)之后满足以上条件，以保证两者时间段完全错开。因为控件给的时间是“00:00:00”格式的字符串，所以我引入了moment库将字符串转成时间戳，时间戳可以比较大小。constjudge=(a1,a2)=>{letresult=falseconststart1=moment(a1[0],"HH:mm:ss").valueOf()constend1=moment(a1[1],"HH:mm:ss").valueOf()conststart2=moment(a2[0],"HH:mm:ss").valueOf()constend2=moment(a2[1],"HH:mm:ss")。valueOf()if(start1==start2){returnfalse}elseif(start1>start2){result=start1>end2}else{result=end1{letjudgeResult=trueif(durations&&durations.length>1){for(leti=0;i{letresult=falseconststart1=moment(a1[0],"HH:mm:ss").valueOf()constend1=moment(a1[1],"HH:mm:ss").valueOf()conststart2=moment(a2[0],"HH:mm:ss").valueOf()constend2=moment(a2[1],"HH:mm:ss").valueOf()if(start1==start2){returnfalse}elseif(start1>start2){result=start1>end2}else{result=end1

上一篇：Vue权限路由+数据权限最佳实践

下一篇：上海乐佰特学习java的第七天

iview-动态表单和自定义验证时间段重叠相关文章