最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
vue element el-form多级嵌套验证代码实现示例
时间:2022-08-12 编辑:袖梨 来源:一聚教程网
本篇文章小编给大家分享一下vue element el-form多级嵌套验证代码实现示例,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。
最近在做项目时遇到这样一个需求,一个form表单里面有两个字段数量不固定,可以动态的增删,在提交的时候不管数量有多少都需要验证,页面效果如下:
form表单对应的数据结构如下:
voucherInfo: { cash: [ { cashNum: '', // 押金流水号 cashPayType: null, // 押金支付类型 } ], cashPayTime: '', // 押金支付时间 cashPayVoucher: [], // 押金支付凭证 commissionNum: '', // 佣金流水号 commissionPayType: null, // 佣金支付方式 commissionPayTime: '', // 佣金支付时间 commissionPayVoucher: [], // 佣金支付凭证 remark: '' // 备注 }
在这里主要考虑的就是如何验证voucherInfo的第一个字段,它是一个数组,数组里面又是一个对象,我们要验证这个对象的每个属性,简而言之,就是验证对象里面的数组里面的对象属性。
方法一:el-form里面再嵌套一个el-form
验证规则:
voucherRule: { cashPayTime: [{ required: true, message: '请选择押金支付时间', trigger: 'change'}], cashPayVoucher: [{ required: true, message: '请上传押金支付凭证', trigger: 'change'}], commissionNum: [{ required: true, message: '请输入佣金流水号', trigger: 'blur'}], commissionPayType: [{ required: true, message: '请选择佣金支付方式', trigger: 'change'}], commissionPayTime: [{ required: true, message: '请选择佣金支付时间', trigger: 'change'}], commissionPayVoucher: [{ required: true, message: '请上传佣金支付凭证', trigger: 'change'}], }, subVoucherRule: { cashNum: [{ required: true, message: '请输入押金流水号', trigger: 'blur'}], cashPayType: [{ required: true, message: '请选择押金支付方式', trigger: 'change'}], }
提交时验证代码:因为有两个form,所以两个都需要验证
方法二:直接把验证规则写在html中
这样验证的时候只需要验证一个表单就行了。
最终的实现效果:
-
上一个: java基于RMI远程过程调用代码解析
-
下一个: vue实现动态设置元素的高度代码示例
相关文章
- SpringBoot测试配置属性与web启动环境解析 10-24
- SpringBoot常用计量与bean属性校验和进制数据转换规则解析 10-24
- 工厂方法在Spring框架中的运用介绍 10-24
- SpringBoot热部署设置详解 10-24
- JavaScript二叉搜索树构建操作解析 10-12
- JavaScript二叉树及各种遍历算法讲解 10-12