Vee-validate在失去焦点时进行验证，防止表单提交

使用Vee-validate库时，可以通过在表单的输入字段上添加@blur事件来在失去焦点时进行验证，以防止表单提交。

以下是一个示例代码，演示如何在Vue.js中使用Vee-validate库来实现该功能：

1. 首先，需要安装Vee-validate库。可以使用npm或yarn进行安装：

npm install vee-validate@next --save

2. 在Vue组件中引入Vee-validate库，并设置验证规则：

<template>
  <form @submit="submitForm">
    <div>
      <label for="name">Name:</label>
      <input id="name" v-model="name" @blur="$refs.form.validate()">
      <span>{{ errors.name ? errors.name[0] : '' }}</span>
    </div>

    <div>
      <label for="email">Email:</label>
      <input id="email" v-model="email" @blur="$refs.form.validate()">
      <span>{{ errors.email ? errors.email[0] : '' }}</span>
    </div>

    <button type="submit">Submit</button>
  </form>
</template>

<script>
import { useForm, useField } from 'vee-validate';

export default {
  setup() {
    const { handleSubmit, errors } = useForm();

    const { value: name } = useField('name', 'required');
    const { value: email } = useField('email', 'required|email');

    const submitForm = handleSubmit(() => {
      // 处理表单提交逻辑
    });

    return {
      name,
      email,
      submitForm,
      errors,
    };
  },
};
</script>

在上述代码中：

• @blur="$refs.form.validate()"会在输入字段失去焦点时进行验证。当验证失败时，Vee-validate会自动将错误信息存储在errors对象中。

• useForm()和useField()是Vee-validate提供的两个自定义hook，用于处理表单的验证逻辑。useForm()返回一个包含handleSubmit和errors的对象，用于处理表单的提交和获取错误信息。useField(name, rules)用于定义输入字段的名称和验证规则。

• 在submitForm函数中，可以处理表单的提交逻辑。只有当所有字段都通过验证时，才会执行submitForm函数中的代码。

需要注意的是，上述代码是使用Vue 3的<script setup>语法编写的，如果使用Vue 2，需要适当修改代码。