利用iview怎么实现动态表单和自定义验证时间段重叠

　　介绍

利用iview怎么实现动态表单和自定义验证时间段重叠?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。

动态添加表单项

iview的动态添加表单很简单,只需设置好表单项为一个数组,添加新项目的时候就推一个默认好的值,剩下的iview会帮你做的好。

& lt; template  lang=癶tml"比; 　　,& lt; div 类=?“在 　　 　　,,,& lt;形式 　　,,,,,ref=癴ormValidate" 　　,,,,,:模型=癴ormValidate" 　　,,,,,:规则=皉ulesValidate" 　　,,,,,:label-width=?00”; 　　,,,,,:label-colon=皌rue" 　　,,,的在 　　& lt; FormItem。才能 　　,,,)=?项目,,指数),拷贝formValidate.showTimeDurations" 　　,,,:关键=癷ndex" 　　,,,:道具=? # 39;showTimeDurations [& # 39;, +, index  +, & # 39;]。value # 39;“ 　　,,,:label=? # 39;显示时段& # 39;,+,(时间+ index  1)“; 　　,,在 　　,,,& lt; Row> 　　,,,,& lt; TimePicker 　　,,,,,类型=皌imerange" 　　,,,,,v模型=癷tem.value" 　　,,,,,位置=癰ottom-end" 　　,,,,,占位符=把≡袷奔涠巍? 　　,,,,, 　　,,,,,:禁用=癷sDisEdit" 　　,,,,,在& lt;/TimePicker> 　　,,,,& lt; Button 形状=癱ircle",图标=癿d-close", @click=癶andleRemove(索引)“,祝辞& lt;/Button> 　　,,,& lt;/Row> 　　,,& lt;/FormItem> 　　,,& lt; FormItem , v=癴ormValidate.showTimeDurations.length  & lt;, 3“在 　　,,,& lt; Button 类型=癲ashed", long  @click=癶andleAddDuration",图标=癿d-add"在添加显示时段& lt;/Button> 　　,,& lt;/FormItem> 　　,,& lt;/Form> 　　,& lt;/div> 　　& lt;/template> 　　 　　& lt; script> 　　export  default  { 　　,名字:& # 39;banner_new& # 39; 　　,数据(){ 　　return {才能 　　,,,formValidate: { 　　,,,showTimeDurations:,[{值:,(& # 39;& # 39;& # 39;& # 39;]}] 　　,,} 　　,,} 　　}, 　　,方法:{ 　　handleAddDuration才能(),{ 　　,,this.formValidate.showTimeDurations.push({值:,(& # 39;& # 39;& # 39;& # 39;]}) 　　,,}, 　　handleRemove才能(索引),{ 　　,,this.formValidate.showTimeDurations.splice(指数,1) 　　,,} 　　,} 　　} 　　& lt;/script> 　　 　　& lt; style  lang=癱ss", scoped> 　　& lt;/style>

利用iview怎么实现动态表单和自定义验证时间段重叠

表单验证

iview的表单验证是通过在形式添加属性<代码>:规则=皉ulesValidate">

添加一个标题表单项和提交按钮

, & lt; FormItem 标签=懊啤?道具=皌itle",在 　　,,,& lt; Input  v模型=癴ormValidate.title",:禁用=癷sDisEdit",:占位符=? # 39;请输入轮播图名称(最多50个字符)& # 39;“,最大长度=?0”,show-word-limit> & lt;/Input> 　　& lt;才能/FormItem> 　　,,… 　　& lt;才能Row 类型=癴lex",证明=笆?在 　　,,,& lt; Button 类型=皃rimary",, v=癷sCanSave", @click=癶andleSubmit (& # 39; formValidate& # 39;)“在保存& lt;/Button> 　　& lt;才能/Row> ,,方法:,{ 　　,,,handleSubmit(形式),{ 　　,,,,,//,调用验证方法会执行验证 　　,,,,,,美元参(形式). validate (validate =祝辞,{ 　　,,,,,,,//,验证=true/false,验证成功与否 　　,,,,,}) 　　,,,}, 　　以前,,}

表单验证:

rulesValidate:, { 　　标题:,才能 　　,,,{ 　　,,,,,要求:,真的, 　　,,,,,的信息:,& # 39;请填写轮播图名称& # 39;, 　　,,,,,触发:,& # 39;模糊# 39; 　　,,,}, 　　,,,{ 　　,,,,,类型:,& # 39;字符串# 39; 　　,,,,,马克斯:,50岁, 　　,,,,,的信息:,& # 39;50个字以内,中文/字母/数字/常用字符& # 39;, 　　,,,,,触发:,& # 39;改变# 39; 　　,,,} 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null

利用iview怎么实现动态表单和自定义验证时间段重叠