Vue3+VeeValidate4中handleSubmit不返回值且不触发验证问题

问题根本原因 #

你在setup中重复调用了两次useForm()，每次调用useForm都会生成独立的表单上下文实例，互不关联：

• 第一次调用useForm()没有传任何配置，生成的空表单实例对应的handleSubmit、字段状态都没有和你后面定义的校验规则、email字段绑定
• 第二次调用useForm()传入了校验规则和初始值，但你没有用这次返回的handleSubmit，所以提交逻辑完全走的是第一个无配置的表单实例

对应两个问题的解释 #

• 为什么提交表单时不会触发表单的validate()方法，校验失败时也不会阻止提交？
  你用到的handleSubmit属于第一次调用useForm生成的实例，这个实例没有配置校验规则，自然不会触发校验逻辑，不管输入内容是否符合规则都会直接放行提交。
• 为什么handleSubmit回调的入参values是空对象？
  你后续通过useField注册的email字段，是绑定到第二次调用useForm生成的实例上的，第一个实例没有注册任何字段，所以提交时收集到的字段值集合是空对象。

修复方案 #

仅调用一次useForm，所有配置都在这次调用时传入，用这次返回的handleSubmit生成提交方法即可，修改后代码如下：

import { useField, useForm } from "vee-validate";
import { object, string } from "yup";

export default {
  name: "App",
  setup() {
    // 定义校验规则
    const schema = object({
      email: string().required().email(),
    });
    // 仅调用一次useForm，传入所有配置，取出需要的方法和状态
    const { handleSubmit, submitCount } = useForm({
      validationSchema: schema,
      initialValues: {
        email: "",
      },
    });

    const onSubmit = handleSubmit((values) => { 
      console.log(values, submitCount.value); // 可正常拿到email字段值
    });

    const { value: email, errorMessage: emailError } = useField("email");

    return {
      email,
      emailError, 
      onSubmit,
    };
  },
};

内容的提问来源于stack exchange，提问作者emendelski