您现在的位置是：网站首页> 编程资料编程资料

vue element el-form 多级嵌套验证的实现示例_vue.js_

2023-05-24 449人已围观

简介 vue element el-form 多级嵌套验证的实现示例_vue.js_

 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中

这样验证的时候只需要验证一个表单就行了。
最终的实现效果：

到此这篇关于vue element el-form 多级嵌套验证的实现示例的文章就介

上一篇：element表单el-form的label自适应宽度的实现_vue.js_

下一篇：一文带你了解React中的函数组件_React_

您现在的位置是：网站首页> 编程资料编程资料

vue element el-form 多级嵌套验证的实现示例_vue.js_

目录

方法一：el-form里面再嵌套一个el-form

方法二：直接把验证规则写在html中

相关内容

点击排行

本栏推荐

猜你喜欢