vue3 el-form使用validate事件效验表单项是否为空

在Vue 3中使用`<el-form>`组件进行表单验证时，可以通过`validate`方法来校验表单项是否为空。下面是一个示例代码，演示了如何在表单提交时验证所有表单项：

<template>
  <el-form
    ref="formRef"
    :model="form"
    label-width="100px"
    @submit.native.prevent="handleSubmit"
  >
    <el-form-item
      label="Name"
      prop="name"
    >
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <!-- 其他表单项 -->
    <el-form-item>
      <el-button type="primary" @click="handleSubmit">Submit</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref } from 'vue';

const form = ref({
  name: '',
  // 初始化其他表单项
});

const formRef = ref(null);

const handleSubmit = async () => {
  try {
    await formRef.value.validate();
    // 校验成功，可以进行提交或其他操作
    console.log('Form submitted:', form.value);
  } catch (error) {
    // 校验失败，控制台打印错误信息
    console.error('Submit failed:', error);
  }
};

// 如果需要针对单项进行验证，可以使用如下方式：
const validateName = async () => {
  try {
    await formRef.value.validateField('name');
  } catch (error) {
    console.error('Name validation failed:', error);
  }
};
</script>

解释：
- 使用`ref`创建了表单数据`form`和表单的引用`formRef`。
- 表单使用`v-model`双向绑定表单项的值。
- `el-form`的`ref`属性用于获取组件实例，以便可以调用其`validate`方法。
- `el-form-item`的`prop`属性用来指定验证的字段名，它是表单项的唯一标识。
- `handleSubmit`方法会在表单提交时调用，它尝试调用`validate`方法来校验整个表单。
- 如果校验成功，表单数据将被打印出来，表示可以继续进行提交操作。
- 如果校验失败，错误信息将被捕获并打印出来。
- 如果需要针对特定的表单项进行验证，可以调用`validateField`方法，并传入相应的`prop`值。