vue多个组件校验

模块化开发项目就是导致一个单页面多个组件，我们提交前就需要同时校验多个组件的表单，代码如下；

父组件.vue

点击【保存】按钮的时候需要校验以下父组件基础表单和其他两个子组件的表单，需要给组件加ref属性。

子组件.vue

就正常用form表单来写

  <a-form ref="formRef" layout="vertical" :model="formData">
    <transition-group name="slide">
      <a-row v-for="(value, index) in formData.bankCardInfo" :key="index" :gutter="80">
        <a-col :span="7">
       <!-- 我的子组件是数组格式，校验深一层，所以field写的稍微复杂一些，一层的话只写属性就行  -->
          <a-form-item
            label="开户银行:"
            :field="'bankCardInfo.' + index + '.bankName'"
            :validate-trigger="['change', 'input']"
            :rules="[{ required: true, message: '请填写开户银行' }]"
          >
            <a-input v-if="isEdit" v-model="value.bankName" allow-clear placeholder="请填写开户银行" />
            <span v-else class="bold-text-span">{{ value.bankName }}</span>
          </a-form-item>
        </a-col>
        <a-col :span="7">
          <a-form-item
            label="开户名称:"
            :field="'bankCardInfo.' + index + '.name'"
            :validate-trigger="['change', 'input']"
            :rules="[{ required: true, message: '请填写开户名称' }]"
          >
            <a-input v-if="isEdit" v-model="value.name" allow-clear placeholder="请填写开户名称" />
            <span v-else class="bold-text-span">{{ value.name }}</span>
          </a-form-item>
        </a-col>
        <a-col :span="7">
          <a-form-item
            label="银行账号:"
            :field="'bankCardInfo.' + index + '.bankNo'"
            :validate-trigger="['change', 'input']"
            :rules="cardRules"
          >
            <a-input v-if="isEdit" v-model="value.bankNo" allow-clear placeholder="请填写银行账号" />
            <span v-else class="bold-text-span">{{ value.bankNo }}</span>
          </a-form-item>
        </a-col>
        <a-col v-if="isEdit" :span="3" class="xPlusMinus">
          <div v-if="formData.bankCardInfo.length == index + 1" class="xPlusMinus-lone" @click="addCard">
            <IconPlusCircle /><span class="xPlusMinus-lone">添加</span>
          </div>
          <div v-if="formData.bankCardInfo.length > 1" class="xPlusMinus-lone" @click="delCard(index)">
            <IconMinusCircle /><span class="xPlusMinus-lone">删除</span>
          </div>
        </a-col>
      </a-row>
    </transition-group>
  </a-form>

子组件.ts

因为后面校验需要用到promise.all,所以子组件的校验返回一个promise对象。

  /**
   * @function validateForm
   * @description 表单校验
   */
  const validateForm = () => {
    return new Promise((resolve: any) => {
      base.formRef.validate((valid: any) => {
        emit('interData', valid, base.formData.bankCardInfo); // 校验的时候，可以把子组件的数据传递给父组件。自己写方法整合数据就行，提交表单的时候用，这里就不写父组件的方法了
        resolve(valid);
      });
    });
  };

父组件.ts

通过promise.all()同时校验所有组件，通过的话就提交表单

  /**
   * @function validateBasic
   * @description 校验基础表单
   */
  const validateBasic = () => {
    return new Promise((resolve: any) => {
      base.formRef &&
        base.formRef.validate((valid: any) => {
          resolve(valid);
        });
    });
  };
  
  /**
   * @description 点击保存按钮
   */
  const save = () => {
    const asyncTask = [
      validateBasic(), // 
      base.financeInfoRef && base.financeInfoRef.validateForm(), // 通过ref拿到子组件下的校验方法
      base.scenceFeeRef && base.scenceFeeRef.validateForm(),
    ];
    Promise.all(asyncTask).then((validArr: Array) => {
      // 三张表都校验通过-我用的组件校验成功会valid是underfined，根据自己的组件判断校验结果
      if (validArr.every((item: any) => item == void 0)) {
        submit();
      } else {
        Message.warning('请检查表单，有未通过的表单项');
      }
    });
  };