面试题：如何在 Vue 3 中实现一个复杂的表单验证和提交逻辑？

在 Vue 3 中实现复杂的表单验证和提交逻辑，通常需要结合以下技术和工具：

Vue 3 的响应式系统：用于管理表单数据和状态。
验证库：如 VeeValidate 或 Vuelidate，用于简化验证逻辑。
自定义验证逻辑：用于处理复杂的业务规则。
异步提交：处理表单的异步提交逻辑（如 API 请求）。

以下是一个完整的实现示例，使用 VeeValidate 进行表单验证，并结合 Vue 3 的 Composition API 实现复杂的表单逻辑。

1. 安装依赖

首先，安装 VeeValidate 和 yup（用于定义验证规则）：

npm install vee-validate yup

2. 定义表单组件

使用 Vue 3 的 Composition API 和 VeeValidate 实现表单验证和提交逻辑。

示例代码：

<template>
  <form @submit.prevent="submitForm">
    <!-- 用户名 -->
    <div>
      <label for="username">用户名：</label>
      <input
        id="username"
        v-model="formData.username"
        type="text"
        placeholder="请输入用户名"
      />
      <span v-if="errors.username" class="error">{{ errors.username }}</span>
    </div>

    <!-- 密码 -->
    <div>
      <label for="password">密码：</label>
      <input
        id="password"
        v-model="formData.password"
        type="password"
        placeholder="请输入密码"
      />
      <span v-if="errors.password" class="error">{{ errors.password }}</span>
    </div>

    <!-- 确认密码 -->
    <div>
      <label for="confirmPassword">确认密码：</label>
      <input
        id="confirmPassword"
        v-model="formData.confirmPassword"
        type="password"
        placeholder="请再次输入密码"
      />
      <span v-if="errors.confirmPassword" class="error">{{
        errors.confirmPassword
      }}</span>
    </div>

    <!-- 提交按钮 -->
    <button type="submit" :disabled="isSubmitting">
      {{ isSubmitting ? '提交中...' : '提交' }}
    </button>
  </form>
</template>

<script>
import { ref } from 'vue';
import { useForm, useField } from 'vee-validate';
import * as yup from 'yup';

export default {
  setup() {
    // 定义表单验证规则
    const schema = yup.object({
      username: yup.string().required('用户名不能为空').min(3, '用户名至少 3 个字符'),
      password: yup.string().required('密码不能为空').min(6, '密码至少 6 个字符'),
      confirmPassword: yup
        .string()
        .required('请确认密码')
        .oneOf([yup.ref('password')], '两次输入的密码不一致'),
    });

    // 使用 useForm 初始化表单
    const { handleSubmit, errors } = useForm({
      validationSchema: schema,
    });

    // 定义表单字段
    const { value: username } = useField('username');
    const { value: password } = useField('password');
    const { value: confirmPassword } = useField('confirmPassword');

    // 表单数据
    const formData = ref({
      username: '',
      password: '',
      confirmPassword: '',
    });

    // 提交状态
    const isSubmitting = ref(false);

    // 提交表单
    const submitForm = handleSubmit(async (values) => {
      isSubmitting.value = true;
      try {
        // 模拟异步提交
        await new Promise((resolve) => setTimeout(resolve, 1000));
        console.log('表单提交成功:', values);
        alert('表单提交成功！');
      } catch (error) {
        console.error('表单提交失败:', error);
        alert('表单提交失败，请重试！');
      } finally {
        isSubmitting.value = false;
      }
    });

    return {
      formData,
      errors,
      isSubmitting,
      submitForm,
    };
  },
};
</script>

<style>
.error {
  color: red;
  font-size: 12px;
}
</style>

3. 代码解析

3.1 使用 `vee-validate` 进行验证

useForm：用于初始化表单，定义验证规则。
useField：用于绑定表单字段，并自动处理验证逻辑。
yup：用于定义验证规则（如必填、最小长度、匹配等）。

3.2 表单数据管理

使用 ref 定义表单数据（formData）。
使用 v-model 绑定表单字段。

3.3 提交逻辑

使用 handleSubmit 处理表单提交。
在提交过程中，禁用提交按钮，防止重复提交。
使用 try-catch 处理异步提交中的错误。

3.4 错误提示

通过 errors 对象显示字段验证错误信息。

4. 扩展功能

4.1 自定义验证规则

如果需要自定义验证规则，可以在 yup 中添加自定义方法：

yup.addMethod(yup.string, 'noSpaces', function (message) {
  return this.test('noSpaces', message, (value) => {
    return !value.includes(' ');
  });
});

const schema = yup.object({
  username: yup.string().noSpaces('用户名不能包含空格'),
});

4.2 异步验证

如果需要异步验证（如检查用户名是否已存在），可以使用 yup 的 test 方法：

const schema = yup.object({
  username: yup.string().test(
    'uniqueUsername',
    '用户名已存在',
    async (value) => {
      const isUnique = await checkUsernameUnique(value); // 调用 API 检查用户名
      return isUnique;
    }
  ),
});

4.3 表单重置

在提交成功后，可以重置表单数据：

const { resetForm } = useForm({
  validationSchema: schema,
});

const submitForm = handleSubmit(async (values) => {
  // 提交逻辑
  resetForm(); // 重置表单
});