ant design vue做表单验证及form表单外验证、父子嵌套多个表单校验

1、form表单验证(若有时遇到输入框有值但是还是触发验证规则了，请检查form表单绑定正确吗、校验规则正确吗、表格数据字段名正确吗)

<a-form
  :model="formState"
  :label-col="{ span: 8 }"
  :wrapper-col="{ span: 16 }"
  :rules="rules"
  ref="form"
>
    <a-row :gutter="[0, 24]">
       <a-col :span="8">
          <a-form-item name="faqiren" label="发起人" labelAlign="right">
              <a-input v-model:value="formState.faqiren" disabled />
          </a-form-item>
       </a-col>
     </a-row>
 </a-form>
<a-button type="primary"  html-type="submit" @click="SubmitReview()">
提交审核</a-button>

// 表单数据对象
  const formState = ref({
    faqiren: '',
  });
  const rules = {
    faqiren: [
      {
        required: true,
        trigger: 'change',
      },
    ]
  };

2、form表单外验证

const form = ref();
const SubmitReview = () => {
    form.value
      .validateFields()
      .then((values) => {
        console.log('验证通过，表单数据为：', values);
      })
      .catch((errorInfo) => {
        console.log('验证失败，错误信息为：', errorInfo);
      });
};

3、父子嵌套多个表单校验（父组件中有一个form表单，子组件中也有一个form表单，需求是在父组件中统一处理父组件和子组件的2个表单的校验）

 父组件

//父组件
<a-form
  :model="formState"
  :label-col="{ span: 8 }"
  :wrapper-col="{ span: 16 }"
  :rules="rules"
  ref="form"
>
    <a-row :gutter="[0, 24]">
       <a-col :span="8">
          <a-form-item name="faqiren" label="发起人" labelAlign="right">
              <a-input v-model:value="formState.faqiren" disabled />
          </a-form-item>
       </a-col>
     </a-row>
 </a-form>
//子组件
<zhuanchu ref="form1" v-if="formState.biandongleixing == 'zhuanchu'"></zhuanchu>

<a-button type="primary"  html-type="submit" @click="SubmitReview()">
提交审核</a-button>

// 表单数据对象
  const formState = ref({
    faqiren: '',
  });
  const rules = {
    faqiren: [
      {
        required: true,
        trigger: 'change',
      },
    ]
  };


const form = ref();
const SubmitReview = () => {
//父组件校验
    form.value
      .validateFields()
      .then((values) => {
        console.log('验证通过，表单数据为：', values);
      })
      .catch((errorInfo) => {
        console.log('验证失败，错误信息为：', errorInfo);
      });
//子组件校验
    form1.value.getDom()
      .validateFields()
      .then((values) => {
        console.log('验证通过，表单数据为：', values);
      })
      .catch((errorInfo) => {
        console.log('验证失败，错误信息为：', errorInfo);
      });
};

子组件 

//子组件
<a-form
  :model="formState"
  :label-col="{ span: 8 }"
  :wrapper-col="{ span: 16 }"
  :rules="rules"
  ref="form2"
>
    <a-row :gutter="[0, 24]">
       <a-col :span="8">
          <a-form-item name="nianling" label="年龄" labelAlign="right">
              <a-input v-model:value="formState.nianling" disabled />
          </a-form-item>
       </a-col>
     </a-row>
 </a-form>

// 表单数据对象
  const formState = ref({
    nianling: '',
  });
  const rules = {
    nianling: [
      {
        required: true,
        trigger: 'change',
      },
    ]
  };

  const form2=ref()
  const getDom=()=>{
    return form2.value
  }
  defineExpose({getDom})