使用 VeeValidate 验证表单

使用 VeeValidate 时，我们将通过其组件验证 HTML 表单，并利用 Vue 的作用域插槽展示错误信息。例如，以下是我们熟悉的 v-model 输入元素：

<input v-model="username" type="text" />

若需用 VeeValidate 验证，只需用 <ValidationProvider> 组件包裹输入框：

<ValidationProvider name="message" rules="required" v-slot="{ errors }">
  <input v-model="username" name="username" type="text" />
  <span>{{ errors[0] }}</span>
</ValidationProvider>

通常，我们通过 <ValidationProvider> 组件验证 <input> 元素，利用 rules 属性绑定验证规则，再通过 v-slot 指令显示错误信息。以下是使用该插件加速验证流程的步骤：

通过 npm 安装 VeeValidate：
```
$ npm i vee-validate
```
在 /src/ 目录创建 .js 文件，使用 extend 函数添加规则：
// src/vee-validate.js import { extend } from 'vee-validate' import { required } from 'vee-validate/dist/rules' extend('required', { ...required, message: 'This field is required' })
VeeValidate 以独立模块提供了多种内置验证规则（如 required、email、min、regex 等），因此我们只需按需导入。上述代码中，我们导入 required 规则并通过 extend 函数注册，同时在 message 属性中自定义了提示信息。
将 /src/vee-validate.js 导入到初始化 Vue 实例的主入口文件：
```
// src/main.js
import Vue from 'vue'
import './vee-validate'
```

在页面中局部导入 ValidationProvider 组件并开始验证该页面的输入字段：

// src/components/vee-validation.vue
<template>
  <ValidationProvider
    name="name"
    rules="required|min:3"
    v-slot="{ errors }"
  >
    <input
      v-model.lazy="name"
      type="text"
      name="name"
    >
    <span>{{ errors[0] }}</span>
  </ValidationProvider>
</template>

<script>
import { ValidationProvider } from 'vee-validate'

export default {
  components: {
    ValidationProvider
  }
}
</script>

我们也可以在 /src/main.js 或 /src/plugins/vee-validate.js 中全局注册 ValidationProvider：

import Vue from 'vue'
import { ValidationProvider, extend } from 'vee-validate'
Vue.component('ValidationProvider', ValidationProvider)

但如果您不需要在应用的每个页面都使用这个组件，这可能不是个好主意。所以如果只需要在某个页面使用，就局部导入它。

局部导入 ValidationObserver 组件并将 passes 对象添加到 v-slot 指令中。因此让我们按照以下方式重构第 4 步的 JavaScript 代码：

// src/components/vee-validation.vue
<template>
  <ValidationObserver v-slot="{ passes }">
    <form
      v-on:submit.prevent="passes(processForm)"
      novalidate="true"
    >
      <!-- 表单内容 -->
      <input
        type="submit"
        value="Submit"
      >
    </form>
  </ValidationObserver>
</template>

<script>
import {
  ValidationObserver,
  ValidationProvider
} from 'vee-validate'

export default {
  components: {
    ValidationObserver,
    ValidationProvider
  },
  methods: {
    processForm() {
      console.log('Posting to the server...')
    }
  }
}
</script>

我们使用 <ValidationObserver> 组件包裹 <form> 元素，在提交前判断表单是否有效。同时利用 <ValidationObserver> 组件作用域插槽对象中的 passes 属性，在表单无效时阻止提交行为。然后将 processForm 方法传递给表单元素 v-on:submit 事件中的 passes 函数。当表单无效时，我们的 processForm 方法将不会被调用。

至此已完成。可以看到我们不再需要在 methods 属性中为 v-on:submit 事件编写 checkForm 方法，因为 VeeValidate 已经帮我们完成了繁重的表单元素验证工作，现在我们的 JavaScript 代码更加简洁。我们只需要用 <ValidationProvider> 和 <ValidationObserver> 组件包裹输入字段即可。

如需了解更多关于 Vue 插槽和 VeeValidate 的信息，请访问以下链接： https://logaretm.github.io/vee-validate/ （VeeValidate） https://vuejs.org/v2/guide/components-slots.html （Vue插槽）

您可以在我们 GitHub 仓库的 /chapter-7/vue/cli/ 目录中找到前述 Vue 应用示例。

接下来我们将在下一节探讨如何在 Nuxt 应用中应用 VeeValidate。