对于循环表单el-form的表单验证

由于el-form是循环的,所以他的ref也是循环的,那么每一个表单要想验证,则可采用以下办法

传入你所需要验证的表单ref,调用此函数就可获得是否所有循环的表单都验证成功了 

export const validateMultipleForm = async(formEl: FormInstance[] | undefined) => {
  if (!formEl) return
      formEl = formEl.filter(obj => obj !== null)
      const validationPromises = formEl.map((element) => {
        return new Promise((resolve) => {
          if (element) {
            element.validate((isValid) => {
              resolve(isValid);
            })
          } else {
            resolve(false)
          }
        })
      })
      const formValid = (await Promise.all(validationPromises)).every((valid) => valid);
      return formValid
}

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用`el-form`表单组件嵌套另一个`el-form`表单组件。这种嵌套可以用于更复杂的表单布局和组织。 以下是一个示例代码,演示了如何嵌套`el-form`表单: ```vue <template> <el-form ref="outerForm" :model="outerForm" label-width="100px"> <el-form-item label="外层表单项"> <el-input v-model="outerForm.field1"></el-input> </el-form-item> <el-form ref="innerForm" :model="innerForm" label-width="100px"> <el-form-item label="内层表单项"> <el-input v-model="innerForm.field2"></el-input> </el-form-item> </el-form> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> </template> <script> export default { data() { return { outerForm: { field1: '' }, innerForm: { field2: '' } }; }, methods: { submitForm() { this.$refs.outerForm.validate((validOuterForm) => { if (validOuterForm) { // 外层表单校验通过 this.$refs.innerForm.validate((validInnerForm) => { if (validInnerForm) { // 内层表单校验通过,提交数据 console.log(this.outerForm); console.log(this.innerForm); } else { // 内层表单校验不通过 return false; } }); } else { // 外层表单校验不通过 return false; } }); } } }; </script> ``` 在上面的示例中,外层表单和内层表单都使用了`el-form`组件,并且分别定义了自己的数据模型(`outerForm`和`innerForm`)。你可以根据实际需要添加更多的表单项。 请注意,在提交表单时,需要先校验外层表单的有效性,然后再校验内层表单的有效性。只有当两个表单校验通过时,才会提交数据。 希望这个例子对你有所帮助!如果你还有其他问题,请随时提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值