今天来了解下一款Vue.js表单验证插件：vee-validate。

vee-validate是一款很灵活的插件，可以支持很多方式，对于我们开发表单功能非常有用，今天我们一起来学习下吧。首先我们看下它的一些优势。

简单

熟悉且易于设置的声明式验证

灵活

同步、异步、字段级或表单级验证

快

使用直观的 API 和较小的占用空间更快地构建更快的表单

Minimal

只处理复杂和痛苦的形式问题，让您完全控制其他一切

占用空间小

占用空间小 < 5kb 这使您的应用程序加载速度更快

UI 不可知论

使用原生 HTML 元素或您最喜欢的 UI 库组件

Progressive

无论您使用 Vue.js 作为渐进式增强还是在复杂的设置中，都适用于任何设置

内置规则

包含 25 条以上规则的配套库，涵盖了大多数 Web 应用程序中的大部分需求

i18n

来自世界各地的开发人员贡献的 45 多个内置规则的语言环境

快速设置

安装

# install with yarnyarn add vee-validate@next# install with npmnpm install vee-validate@next --save

或者使用 CDN

<script src="https://unpkg.com/vee-validate@next"></script>

用法

注册Field和Form组件并创建一个简单的required验证器：

import { Field, Form } from 'vee-validate';export default {
  components: {
    Field,
    Form,
  },
  methods: {
    // Validator function
    isRequired(value) {
      return value ? true : 'This field is required';
    },
  },};

然后使用Form和Field组件来呈现您的表单：

<Form v-slot="{ errors }">
  <Field name="field" :rules="isRequired" />

  <span>{{ errors.field }}</span></Form>

今天主要介绍vee-validate的概要，详细的教程我们后面会陆续发布，请关注Web前端之家更新动态吧！