vee-validate是Vue.js的轻量级插件，可让您验证输入字段并显示错误。

变更日志：

v3.3.11（09/11/2020）

• 修复了针对其他字段（如排除）的无限参数不会映射到其目标值的问题

v3.3.8（08/01/2020）

• 固定withValidation不保留包装的组件作用域插槽
• i18n更新

v3.3.7（07/01/2020）

• 错误修正

v3.3.6（06/27/2020）

• 将params参数标记为非可选参数，因为将始终提供

v3.3.5（06/20/2020）

• 修复：在重新渲染期间添加了NaN检查值是否相等

v3.3.4（06/17/2020）

• 更新了i18n
• 向图像规则添加了图像/ Webp支持

安装和下载：

// for vue 1.x
npm install vee-validate --save

// for vue 2.x
npm install vee-validate@next --save

入门

安装您将在应用程序中使用的规则，我们现在将安装required规则：

import { extend } from 'vee-validate';
import { required } from 'vee-validate/dist/rules';

// 添加所需的规则
extend('required', {
  ...required,
  message: 'This field is required'
});

导入ValidationProvider组件并注册：

全局注册

import { ValidationProvider } from 'vee-validate';

// 全局注册
// main.js 或任何入口文件。
Vue.component('ValidationProvider', ValidationProvider);

本地注册

import { ValidationProvider } from 'vee-validate';

export default {
  components: {
    ValidationProvider
  }
};

所有的JavaScript工作都已完成。接下来，在模板中添加要验证它们的输入：

<ValidationProvider name="email" rules="required|email">
  <div slot-scope="{ errors }">
    <input v-model="email">
    <p>{{ errors[0] }}</p>
  </div>
</ValidationProvider>