关于Element Plus的问题（想要更好的使用校验）

问题描述：

在看表单验证的时候我看到现在的Element Plus官网已经只有Vue3的描述了，有一些很疑惑的地方希望可以得到老师的帮助来解惑。

https://element-plus.gitee.io/zh-CN/component/form.html#%E8%A1%A8%E5%8D%95%E6%A0%A1%E9%AA%8C

比如以下代码：

<template>
  <el-form
    ref="ruleFormRef"
    :model="ruleForm"
    :rules="rules"
    label-width="120px"
    class="demo-ruleForm"
    :size="formSize"
    status-icon
  >
    <el-form-item label="Activity name" prop="name">
      <el-input v-model="ruleForm.name" />
    </el-form-item>
    <el-form-item label="Activity zone" prop="region">
      <el-select v-model="ruleForm.region" placeholder="Activity zone">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>
    <el-form-item label="Activity count" prop="count">
      <el-select-v2
        v-model="ruleForm.count"
        placeholder="Activity count"
        :options="options"
      />
    </el-form-item>
    <el-form-item label="Activity time" required>
      <el-col :span="11">
        <el-form-item prop="date1">
          <el-date-picker
            v-model="ruleForm.date1"
            type="date"
            label="Pick a date"
            placeholder="Pick a date"
            style="width: 100%"
          />
        </el-form-item>
      </el-col>
      <el-col class="text-center" :span="2">
        <span class="text-gray-500">-</span>
      </el-col>
      <el-col :span="11">
        <el-form-item prop="date2">
          <el-time-picker
            v-model="ruleForm.date2"
            label="Pick a time"
            placeholder="Pick a time"
            style="width: 100%"
          />
        </el-form-item>
      </el-col>
    </el-form-item>
    <el-form-item label="Instant delivery" prop="delivery">
      <el-switch v-model="ruleForm.delivery" />
    </el-form-item>
    <el-form-item label="Activity type" prop="type">
      <el-checkbox-group v-model="ruleForm.type">
        <el-checkbox label="Online activities" name="type" />
        <el-checkbox label="Promotion activities" name="type" />
        <el-checkbox label="Offline activities" name="type" />
        <el-checkbox label="Simple brand exposure" name="type" />
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="Resources" prop="resource">
      <el-radio-group v-model="ruleForm.resource">
        <el-radio label="Sponsorship" />
        <el-radio label="Venue" />
      </el-radio-group>
    </el-form-item>
    <el-form-item label="Activity form" prop="desc">
      <el-input v-model="ruleForm.desc" type="textarea" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">
        Create      </el-button>
      <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
    </el-form-item>
  </el-form></template><script lang="ts" setup>import { reactive, ref } from 'vue'import type { FormInstance, FormRules } from 'element-plus'const formSize = ref('default')const ruleFormRef = ref<FormInstance>()const ruleForm = reactive({
  name: 'Hello',
  region: '',
  count: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',})const rules = reactive<FormRules>({
  name: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  ],
  region: [
    {
      required: true,
      message: 'Please select Activity zone',
      trigger: 'change',
    },
  ],
  count: [
    {
      required: true,
      message: 'Please select Activity count',
      trigger: 'change',
    },
  ],
  date1: [
    {
      type: 'date',
      required: true,
      message: 'Please pick a date',
      trigger: 'change',
    },
  ],
  date2: [
    {
      type: 'date',
      required: true,
      message: 'Please pick a time',
      trigger: 'change',
    },
  ],
  type: [
    {
      type: 'array',
      required: true,
      message: 'Please select at least one activity type',
      trigger: 'change',
    },
  ],
  resource: [
    {
      required: true,
      message: 'Please select activity resource',
      trigger: 'change',
    },
  ],
  desc: [
    { required: true, message: 'Please input activity form', trigger: 'blur' },
  ],})const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })}const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()}const options = Array.from({ length: 10000 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,}))</script>

在这里面，如果我没弄错，这是使用CompositionAPI的形式。但是CompositionAPI不是应该有setup(){}去返回reactive定义的数据吗？这里没有使用setup(){}去返回数据。

这里的 

import type { FormInstance, FormRules } from 'element-plus'

FormInstance和FormRules 是什么？用处是什么？

这个FormRules放在reactive的后面是类似java里声明类型吗？

const rules = reactive<FormRules>({...})

这里绑定按钮的方法，我大概看出是一个箭头函数，但是我不理解这里formEl: FormInstance | undefined 的逻辑，请问这么写是什么意思呢？(特别是这个符号 |  很迷惑)  这里的写法看起来就像java里的增强for循环，但是我不知道formEl : FormInstance真正的意思是什么。因为这里FormInstance似乎是从element plus解构出来的对象？(这里的a冒号b的写法真是猜不出来什么意思，官网也没有写任何注释)。

（上面描述的太长了，我简单重复下这里的疑惑）formEl是什么？formEl:FormInstance在干什么？formEl: FormInstance | undefined 整体在干什么？整个方法的在做什么（大概教我下就行）。

还有这里 async 和 await是什么，我们之前前端的内容因该是没有触及。

我想了解，如果容易解释老师可以直接教我，如果复杂老师推荐一个学习资源或者课程，我去给自己补一补。

尝试过的解决方式：

我大概能看懂整体在做什么。也多亏了老师上课讲的详细，我可以看懂以前觉得和天书一样的东西。我说下我的理解吧。代码中使用了CompositionAPI响应式数据声明。将ref和reactive解构出来用于定义数据。:model="ruleForm"将el-form与下方ruleForm数据模型进行绑定。el-form里面的表单项就可以使用v-model对数据模型中的数据进行双向绑定。const ruleFormRef = ref<FormInstance>()是使用ref函数，我清晰地记得ref函数是定义简单数据的，但是()里面没有任何东西，还有ref<>的用法我不清除。（我只能猜测是创建了一个FormInstance类型的对象？）然后这个ruleFormRef会被作为参数供submitForm和resetForm使用。接着就是我更迷糊的部分了，两个方法都是箭头函数，参数都是(formEl: FormInstance | undefined)。但传入的是ruleFormRef，这个以我现有知识就理解不了了。

(篇幅很长，希望老师可以解答。十分感谢。我在网上找了，但是我的疑问实在无法让搜索引擎理解，实在是找不到解答。)