纯vue3表单数据校验

在Vue 3中，可以使用VeeValidate库进行表单数据校验。VeeValidate是一个非常强大的表单验证插件，可以用于Vue.js应用程序的表单验证。它提供了丰富的验证规则和自定义验证规则的能力。

首先，需要安装VeeValidate库。可以使用npm或yarn进行安装：

npm install vee-validate@next

或者

yarn add vee-validate@next

安装完成后，在你的Vue组件中引入并使用VeeValidate。具体步骤如下：
1. 在你的Vue组件中，引入`defineRule`和`configure`函数：

import { defineRule, configure } from 'vee-validate';

2. 使用`defineRule`函数定义你需要的验证规则。例如，如果想要验证一个字段是否为必填字段，可以使用`required`规则：

defineRule('required', value => {
  if (!value || value.trim() === '') {
    return '该字段为必填字段';
  }
  return true;
});

3. 在Vue组件的`setup`函数中使用`configure`函数来配置VeeValidate的行为。可以指定要使用的验证规则、错误消息等：

configure({
  validateOnInput: true,  // 当输入时进行验证
  validateOnChange: true,  // 当值发生变化时进行验证
});

4. 在Vue模板中，使用`v-model`指令绑定表单字段，并使用`validation`属性获取验证结果。示例代码如下：

<template>
  <form @submit.prevent="submitForm">
    <div>
      <label for="name">姓名</label>
      <input id="name" type="text" v-model="name" />
      <span>{{ validation.name ? validation.name : '' }}</span>
    </div>
    
    <!-- 其他表单字段 -->
    
    <button type="submit">提交</button>
  </form>
</template>

5. 在Vue组件中，定义`submitForm`方法来处理表单提交事件：

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

export default {
  setup() {
    const { handleSubmit } = useForm();
    const { value: name, errorMessage: nameError } = useField('name');
    
    const submitForm = handleSubmit(() => {
      // 表单提交逻辑
    });
    
    return {
      name,
      nameError,      submitForm,
    };
  },
};

上述步骤中，我们引入了VeeValidate库，并定义了一个`required`验证规则来验证字段是否为必填字段。然后，在Vue模板中使用`v-model`指令绑定字段，并使用`validation`属性获取验证结果。最后，在表单提交时调用`handleSubmit`方法来处理表单提交事件。

这样，你就可以在Vue 3中实现纯Vue表单数据校验了。