vue-vben-admin校验

<template>
  <BasicModal
    v-bind="$attrs"
    :title="`${isEdit ? '编辑' : '新建'}指南`"
    :width="900"
    @ok="okHandler"
  >
    <Form :labelCol="{ span: 3 }">
      <FormItem label="标题" v-bind="validateInfos.title">
        <Input v-model:value="modelRef.title" placeholder="请输入内容" />
      </FormItem>
      <FormItem label="正文内容" disabled>
        <MarkDown ref="markDownRef" v-model:value="modelRef.content" />
      </FormItem>
    </Form>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { BasicModal } from '/@/components/Modal';
  import { reactive, ref, watch } from 'vue';
  import { Form, FormItem, Input, Select, Switch } from 'ant-design-vue';
  import { addPostsApi, editPostsApi } from '/@/api/business/setting';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { MarkDown } from '/@/components/Markdown';

  const { createMessage } = useMessage();
  const emit = defineEmits(['confirm']);
  const props = defineProps(['info']);
  const useForm = Form.useForm;
  let modelRef = ref({
    content: '',
    title: '',
    lang: '',
    display: 1,
  });
  let isEdit = ref(false);
  watch(
    () => props.info,
    () => {
      modelRef.value = props.info;
      if (props.info.id) {
        isEdit.value = true;
      } else {
        isEdit.value = false;
      }
    },
  );
  const { validateInfos, validate } = useForm(
    modelRef,
    reactive({
      title: [
        {
          required: true,
          message: '请输入内容',
        },
      ],
      content: [
        {
          required: true,
          message: '请输入内容',
        },
      ],
    }),
  );
 
  const okHandler = async () => {
    await validate();  // 为什么不执行校验，直接走后面接口
```javascript

if (isEdit.value) {
  await editPostsApi(modelRef.value);
  createMessage.success('编辑成功');
  emit('confirm');
} else {
  await addPostsApi(modelRef.value);
  createMessage.success('添加成功');
  emit('confirm');
}

};

```

提出你的问题