How to manually validate forms?

Validate the entire form using the fApi.validate method

<template>
   <form-create :rule="formRule" v-model:api="formApi" />
   <button @click="validateForm">Submit</button>
</template>
<script setup>
   import { ref } from 'vue';
   const fApi = ref(null);
   const formRule = ref([
   {
      type: 'input',
      field: 'username',
      title: 'Username',
      validate: [
   { required: true, message: 'Username is required', trigger: 'blur' }
      ]
   },
   {
      type: 'input',
      field: 'email',
      title: 'Email',
      validate: [
   { type: 'email', message: 'Please enter a valid email address', trigger: 'blur' }
      ]
   }
   ]);
   const validateForm = () => {
   fApi.value.validate().then(() => {
       console.log('Username validation passed, submit form');
       // Form submission logic
   }).catch(e=>{
       console.log('Username validation failed');
   });
};
</script>

Use the fApi.validateField method to validate only specific fields

Sometimes you only need to validate certain key fields, not the entire form.

<template>
    <form-create :rule="formRule" v-model:api="formApi" />
    <button @click="validateFieldAndSubmit">Submit</button>
</template>
<script setup>
    import { ref } from 'vue';
    const formApi = ref(null);
    const formRule = ref([
        {
            type: 'input',
            field: 'username',
            title: 'Username',
            validate: [
                { required: true, message: 'Username is required', trigger: 'blur' }
            ]
        },
        {
            type: 'input',
            field: 'email',
            title: 'Email'
        }
    ]);
    const validateFieldAndSubmit = () => {
        formApi.value.validateField('username').then(() => {
            console.log('Username validation passed, submit form');
            // Form submission logic
        }).catch(e=>{
            console.log('Username validation failed');
        });
    };
</script>