本篇文章小编给大家分享一下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中
这样验证的时候只需要验证一个表单就行了。
最终的实现效果: