antd自定义表单验证,ant design vue表单验证
今天通过本文给大家分享antd vue实现动态验证循环属性表单的思路，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧
希望实现查询表单的某些属性可以循环验证必填项：
需求：
1.名称，对比项，备注必填，默认为一行，可增加多行
2.根据名称，动态请求对比项列表，名称变化时，清空该行当前选择的对比项
思路：将整个搜索分成了两个表单，分别去做验证。一个是可动态添加的循环表单形式，另一个为普通表单日期格式
超文本标记语言
a-form:form= form @ keyup。进入。native=搜索查询
div class=动态包装
div v-for=(item，index) in formList :key=index
a行：gutter=24
a-col :span=6
表单项目标签=名称：标签列=“{ span:7 }”:包装列=“{ span:17 }”
水青庭占位符=请选择名称
v-decorator=[` equipment[$ { index }]`，{ initialValue: formList[index]？表单列表[索引]。设备： ,规则：[{要求：真，消息： 请选择设备！ }]}]
@change=(e)=equipChange(e，index)
表单列表[索引]中的a-select-option v-for=选项 eqpList :key=选项。 name :value=选项。名称
{{ options.name }}
/a-选择-选项
/a-选择
/a表单项目
/a列
a-col :span=6
表单项目标签=对比项：标签列=“{ span:7 }”:包装列=“{ span:17 }”
水青庭
占位符=请选择对比项
v-decorator=[` data code[$ { index }]`，{initialValue: formList[index]？表单列表[索引]。数据代码： ,规则：[{要求：真，消息： 请选择对比项！ }]}]
表单列表[索引]中的a-select-option v-for=选项。"数据类型列表":key="选项。名称":值="选项。名称"
{{ option.name }}
/a-选择-选项
/a-选择
/a表单项目
/a列
a-col :span=6
表单项目标签=备注：标签列=“{ span:6 }”:包装列=“{ span:18 }”
a-input v-decorator=[` remark[$ { index }]`] placeholder=请输入备注/a-输入
/a表单项目
/a列
a-col:span= 2 style= padding-left:0px
a-form-item:label col=" { span:0 } ":wrapper col=" { span:24 } "
模板v-if=formList.length 1
a-icon type= delete @ click= remove row(index)/
/模板
/a表单项目
/a列
/a行
/div
/div
/a格式
a-form:form= dateForm inline @ keyup。进入。native=搜索查询
表单项目标签=查询日期：标签列=“{ span:8 }”:包装列=“{ span:16 }”
style= display:inline-block；宽度：300像素；
约会挑选者
style= width:200 px；
class=查询组客户
v-decorator=[startTime ，{ rules: [{ required: true，message:请选择开始时间！ }] }]
:禁用日期=禁用开始日期
format=YYYY-MM-DD
占位符=请选择开始时间
@change=handleStart($event)
@ open change= handleStartOpenChange /a-date-picker
/a表单项目
span:style= { display: inline-block ，width: 24px ，textAlign: center }-/span
a-form-item style= display:inline-block；宽度：200像素；
约会挑选者
style= width:200 px；
class=查询组客户
v-decorator=[endTime ，{ rules: [{ required: true，message:请选择结束时间！ }] }]
:disabled-date=disabledEndDate
format=YYYY-MM-DD
占位符=请选择结束时间
@change=handleEnd($event)
:open=endOpen
@ open change= handleendpenchange /a-日期选择器
/a表单项目
span style=margin-left: 10px
a-button type=“primary”:disabled=“loading”@ click=“search query”图标=搜索查询/a按钮
a-button type= primary @ click= search reset icon= search style= margin-left:10px 重置/a按钮
a-button type= primary icon= plus @ click= addRow style= margin-left:10px 新增查询条件/a按钮
/span
/a格式
p查询条件为：{{searchData}}/p
射流研究…
initForm() {
//首先请求设备列表，存放在eqpList中
//初始化形式表单
this.formList.push({
设备： ,
数据代码： ,
备注： ,
eqpList: this.eqpList，
数据类型列表：[]
})
},
//删除一行
手柄移除(索引){
if (this.formList.length===1) {
返回
}
this.formList.splice(索引，1)
},
//新增一行
handleAdd() {
this.formList.push({
设备： ,
数据代码： ,
备注： ,
eqpList: this.eqpList，//可以根据接口动态获取，这里便于演示，直接赋值了
数据类型列表：[],//可以根据接口动态获取并根据设备去关联
})
},
设备变化（值，指数){
//更改赋值
this.formList[index].设备=价值；
//同步更新当前选择的设备对应的对比项列表
this.handleEqpIdentity(值，索引)
},
//根据设备查询对应的对比项列表
handleEqpIdentity(值，索引){
这个。数据类型列表=[]；//清空数据类型列表
this.formList[index].数据类型列表=[]；//清空当前行的数据类型列表
//根据新的设备名称获取对应的对比项列表
行动起来(这个。网址。获取数据类型列表，{设备：值})。然后((res)={
if (res.success) {
这个。数据类型list=RES . result
this.formList[index].数据类型列表=this。数据类型列表；
//this.formList[index].数据代码="";直接赋值为空是无效的
//需使用获取字段值，设置字段值
让数据代码1 arr=this。形式。getfield值(“数据代码”)；
if (dataCode1Arr.length！==0) {
dataCode1Arr[index]=
}
这个。形式。setfields值({数据代码：数据代码1 arr })
}否则{
这个message.warning(res.message)
}
})。catch(()={
这个message.error(获取失败，请重试!)
})
},
//点击查询
searchQuery() {
//先验证循环表单
const { form:{验证字段} }=this
有效字段(错误，值)={
如果(!错误){
这个。日期格式。验证字段((dateErr，dateValues)={
//再验证日期搜索表单
日期值。开始时间=时刻(日期值。开始时间).格式(“YYYY-MM-DD”)
日期值。结束时间=时刻(日期值。结束时间).格式(“YYYY-MM-DD”)
如果(!daterr){
this.loading=true
let formData=Object.assign({}，dateValues)；
//整理成后台所需的数据结构
//循环表单
设search arr=[]；
（值[`设备`])。forEach((项目，索引)={
const obj={
设备：项目，
备注：值[`备注`][索引],
数据代码：值[`数据代码`][索引]
}
搜索arr。push(obj)；
})
//日期表单
如果(!dateValues.startTime) {
formData.startTime=moment(新日期())。格式(“YYYY-MM-DD”)
}
表单数据。eqpinfoparamvolist=search arr
这个。搜索数据=JSON。解析(表单数据)
//请求接口
}
})
}
})
},
到此这篇关于antd vue实现动态验证循环属性表单的文章就介绍到这了，更多相关antd vue动态验证循环属性表单内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。