vue3+ant desigin vue实现表单验证

<a-form
    ref="formRef"
    name="advanced_search"
    class="ant-advanced-search-form"
    :rules="data.rules"
    layout="vertical"
    :model="data.formState"
    >
        <a-row :gutter="24">
            <a-col :span="8">
              <a-form-item label="日期" name="visitDate">
                <a-date-picker placeholder="请选择" style="width: 200px;" v-model:value="data.formState.visitDate" :disabled-date="disabledDate"/>
              </a-form-item>
            </a-col>
            <a-col :span="8" style="position: relative">
              <a-form-item label="费用">
                <a-input-number placeholder="请输入" style="width: 160px;"  v-model:value="data.formState.totalCost" :min="0"/><a-button class="btnSty">元</a-button>
              </a-form-item>
            </a-col>
        </a-row>
</a-form>

<script setup>
import { reactive, onMounted,ref} from 'vue';
const formRef = ref();
const data = reactive({
  formState:{},
  rules:{
    visitDate: [{
      required: true,
      message:'请选择',
      trigger: 'change',
    }]
  },
})

formRef.value.validate()
      .then(() => {
console.log(data.formState);
}).catch(error => {});
</script>