VeeValidate 验证data中的字段

要使用 VeeValidate 验证 data 中的字段，你需要先安装并导入该库。然后你可以在 data 中定义需要验证的字段，例如：

data() {
  return {
    form: {
      name: '',
      email: '',
      age: ''
    }
  }
}

接下来，在模板中添加表单和验证规则：

<template>
  <form @submit.prevent="submitForm">
    <div>
      <label for="name">Name:</label>
      <input type="text" id="name" v-model="form.name">
      <span v-show="errors.has('name')">{{ errors.first('name') }}</span>
    </div>
    <div>
      <label for="email">Email:</label>
      <input type="email" id="email" v-model="form.email">
      <span v-show="errors.has('email')">{{ errors.first('email') }}</span>
    </div>
    <div>
      <label for="age">Age:</label>
      <input type="number" id="age" v-model="form.age">
      <span v-show="errors.has('age')">{{ errors.first('age') }}</span>
    </div>
    <button type="submit">Submit</button>
  </form>
</template>

在组件中添加验证规则：

import { ValidationProvider, ValidationObserver } from 'vee-validate'

export default {
  components: {
    ValidationProvider,
    ValidationObserver
  },
  data() {
    return {
      form: {
        name: '',
        email: '',
        age: ''
      }
    }
  },
  validations: {
    form: {
      name: { required: true },
      email: { required: true, email: true },
      age: { required: true, numeric: true, min_value: 18 }
    }
  },
  methods: {
    submitForm() {
      this.$refs.observer.validate().then(success => {
        if (success) {
          // 表单验证通过，提交表单数据
        }
      })
    }
  }
}

在上面的代码中，我们使用 `ValidationProvider` 组件来绑定表单输入，并使用 `validations` 属性来定义验证规则。我们还使用 `ValidationObserver` 组件来包裹整个表单，并在提交表单时调用 `validate()` 方法来验证表单。最后，我们使用 `errors` 对象来显示验证错误信息。