uniapp 多个动态表单进行校验

<template>
  <view class="container">
    <view class="example">
      <uni-forms ref="mainFormRef" :modelValue="mainForm" :rules="mainFormRules" label-width="80px" >
        <uni-forms-item label="开始时间" required name="reserveStartTime">
          <uni-datetime-picker type="datetime" return-type="datetime"  :start="start" v-model="mainForm.reserveStartTime"  />
        </uni-forms-item>
        <uni-forms-item label="结束时间" required name="reserveEndTime">
          <uni-datetime-picker type="datetime" return-type="datetime" :start="start" v-model="mainForm.reserveEndTime"/>
        </uni-forms-item>
        <uni-forms-item label="访问单位" required name="intervieweeId">
<!--          <uni-data-select v-model="mainForm.visitUnit" :localdata="positionList"  />-->
            <uni-data-picker placeholder="请选择访问单位" popup-title="请选择访问单位和联系人" :localdata="dataTree" v-model="mainForm.intervieweeId" />
        </uni-forms-item>
        <uni-forms-item label="访问事由" required  name="remark">
          <uni-easyinput type="textarea" v-model="mainForm.remark" placeholder="请输入访问事由" />
        </uni-forms-item>
      </uni-forms>
    </view>
    <view class="visitorForm" v-for="(visitor, index) in visitors" :key="index">
      <uni-section title="来访人员" type="line"  >
        <view class="example">
          <uni-forms  ref="visitorFormRef" :modelValue="visitor" :rules="visitorRules" label-width="80px">
            <uni-forms-item label="姓名" required  name="personName">
              <uni-easyinput v-model="visitor.personName" placeholder="请输入姓名" />
            </uni-forms-item>
            <uni-forms-item label="手机号码" required name="phone">
              <uni-easyinput v-model="visitor.phone" placeholder="请输入手机号码" />
            </uni-forms-item>
            <uni-forms-item label="证件号码" required name="cardNumber">
              <uni-easyinput v-model="visitor.cardNumber" placeholder="请输入证件号码" />
            </uni-forms-item>
            <uni-forms-item label="车牌号码"  name="carNumber">
              <uni-easyinput v-model="visitor.carNumber" placeholder="请输入车牌号码" />
            </uni-forms-item>
          </uni-forms>
        </view>
      </uni-section>
    </view>
    <view  style="background-color: #fff; margin: 20rpx 0;">
      <view class="addInvitor" @click="addInvitor">
        <u-icon name="plus-circle-fill" color="#2979ff" size="25"  />
        <view style="margin-left: 15rpx;">添加来访人</view>
      </view>
    </view>
    <view class="btn">
      <u-button type="primary" @click="submit('baseForm')" text="提交"></u-button>
    </view>
  </view>
</template>


<script>
import {addVisitor, getCompanyList} from "../../api";

export default {
  components: {},
  data() {
    return {
      start: new Date(),
      visitors: [{}],
      dataTree: [], // 访问单位列表
      // 基础表单数据
      mainForm: {},
      // 校验规则
      mainFormRules: {
        reserveStartTime: {
          rules: [{required: true, errorMessage: '请选择开始时间'}]
        },
        reserveEndTime: {
          rules: [{required: true, errorMessage: '请选择结束时间'}]
        },
        remark: {
          rules: [{required: true, errorMessage: '请输入访问事由'}]
        },
        intervieweeId: {
          rules: [{required: true, errorMessage: '请选择访问单位'}]
        }
      },
      visitorRules: { // 添加来访人员表单的校验规则
        personName: {
          rules: [{required: true, errorMessage: '请输入姓名'}]
        },
        phone: {
          rules: [{
            required: true,
            errorMessage: '请输入手机号码！'
          }, {
            pattern: '^[1]([3-9])[0-9]{9}$',
            errorMessage: '手机号码不合法！'
          }]
        },
        cardNumber: {
          rules: [{
            required: true,
            errorMessage: '请输入证件号码',
          },
            {
              pattern: '^[1-9]\\d{5}(18|19|([23]\\d))\\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\\d{3}[0-9Xx]$',
              errorMessage: '证件号码不合法！'
            }]
        }
      }
    }
  },
  methods: {
    
    // 访问单位列表
    getPosionData() {
      getCompanyList().then(res => {
        this.dataTree = res.data.map(item => ({
          value: item.id,
          text: item.label,
          children: item.children ? item.children.map(gItem => ({
            text: gItem.label,
            value: gItem.id,
            children: gItem.children ? gItem.children.map(sItem => ({
              text: sItem.label,
              value: sItem.id,
              children: sItem.children ? sItem.children.map(pItem => ({
                text: pItem.label,
                value: pItem.id,
              })) : []
            })) : []
          })) : []
        }));
      })
    },
// 添加来访人
    addInvitor() {
      this.visitors.push({});
    },
    // 提交表单
    async submit() {
      const mainFormValid = await this.$refs.mainFormRef.validate();
      if (!mainFormValid) {
        return ;
      }

      try {
        const validationPromises = this.visitors.map((visitor, index) => {
          return this.$refs.visitorFormRef[index].validate().then(formValid => {
            return formValid;
          }).catch(err => {
            console.log(`表单错误信息 ${index}：`, err);
            return false;
          });
        });

        const validationResults = await Promise.all(validationPromises);

        const allVisitorsValid = validationResults.every(valid => valid);
        if (allVisitorsValid) {
          const params = {
            ...this.mainForm,
            personList: this.visitors
          }
          addVisitor(params).then(res => {
            uni.showToast({
              title: '新增访客成功',
              icon: 'success'
            })
            setTimeout(() => {
              uni.navigateBack({
                delta: 1
              })
            }, 1500)
          })
        }
      } catch (error) {
        console.error('表单验证过程中出现错误：', error);
      }
    }
  },

  onShow() {
    this.getPosionData ()
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 14rpx 22rpx;
  .example {
    padding: 15rpx 22rpx;
    background-color: #fff;
    margin-bottom: 20rpx;
  }
  .addInvitor {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 20rpx 0;
  }
  .btn {
    //position: fixed;
    //left: 50%;
    //bottom: 10rpx;
    //transform: translateX(-50%);
  }
}

</style>

实现效果：