如何手动进行表单验证？

使用 fApi.validate 方法验证整个表单

<template>
   <form-create :rule="formRule" v-model:api="formApi" />
   <button @click="validateForm">提交</button>
</template>
<script setup>
   import { ref } from 'vue';
   const fApi = ref(null);
   const formRule = ref([
   {
      type: 'input',
      field: 'username',
      title: '用户名',
      validate: [
   { required: true, message: '用户名是必填项', trigger: 'blur' }
      ]
   },
   {
      type: 'input',
      field: 'email',
      title: '邮箱',
      validate: [
   { type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur' }
      ]
   }
   ]);
   const validateForm = () => {
   fApi.value.validate().then(() => {
       console.log('用户名验证通过，提交表单');
       // 提交表单逻辑
   }).catch(e=>{
       console.log('用户名验证未通过');
   });
};
</script>

使用 fApi.validateField 方法只验证特定字段

有时您只需要验证某些关键字段，而不是整个表单。

<template>
    <form-create :rule="formRule" v-model:api="formApi" />
    <button @click="validateFieldAndSubmit">提交</button>
</template>
<script setup>
    import { ref } from 'vue';
    const formApi = ref(null);
    const formRule = ref([
        {
            type: 'input',
            field: 'username',
            title: '用户名',
            validate: [
                { required: true, message: '用户名是必填项', trigger: 'blur' }
            ]
        },
        {
            type: 'input',
            field: 'email',
            title: '邮箱'
        }
    ]);
    const validateFieldAndSubmit = () => {
        formApi.value.validateField('username').then(() => {
            console.log('用户名验证通过，提交表单');
            // 提交表单逻辑
        }).catch(e=>{
            console.log('用户名验证未通过');
        });
    };
</script>