专为Vue打造的开源表单验证框架，Github star7k+——VeeValidate

moboyou 2025-07-13 21:16 13 浏览

介绍

vee-validate是Vue.js的基于模板的验证框架，可以验证输入并显示错误。基于模板，只需为每个输入值更改时指定应使用哪种验证器。系统会在支持40多种语言环境的情况下自动生成错误。现成的规则很多。该插件的灵感来自PHP Framework Laravel的验证！这个组件总结为一句话就是：在前端验证里面实现了 laravel 的表单验证，这种实现是指，语法和思想的实现！

简单

基于模板的验证又易于设置

灵活

验证HTML输入和Vue组件，生成本地化错误，可扩展

可配置的

不需要麻烦的配置，都是可选的

Github地址

仓库：https://github.com/logaretm/vee-validate

文档：https://logaretm.github.io/vee-validate/

特性简介

基于模板的验证既亲切又易于设置。

i18n 支持，并且支持40多种语言的本地化错误提示

异步和自定义规则支持

使用Typescript编写

没有其它依赖项

//组件本地化
import ar from 'vee-validate/dist/locale/ar';
import VeeValidate, { Validator } from 'vee-validate';

Validator.localize('ar', ar);
Vue.use(VeeValidate);

安装和使用

安装

当然是使用我们熟悉的npm，或者yarn

# 使用npm安装
npm install vee-validate --save

# 使用yarn安装
yarn add vee-validate

使用

注册ValidationProvider组件并添加所需的规则：

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

extend('required', {
  ...required,
  message: 'This field is required'
});

new Vue({
  el: '#app',
  components: {
    ValidationProvider
  },
  data: () => ({
    value: ''
  })
});

用ValidationProvider包住输入：

<validation-provider rules="required" v-slot="{ errors }">
  <input v-model="value" name="myinput" type="text" />
  <span>{{ errors[0] }}</span>
</validation-provider>

下面截图是官方结合Element和Antd的示例，感兴趣的小伙伴可以直接查看官方示例，一共提供了Element UI、Vuetify、Quasar、BootstrapVue、Buefy、Antd Design的在线范例：

PS：一些高级的API文档可以直接查看官方文档，英文不好的小伙伴可以直接借助浏览器翻译，同样能看懂：

总结

Vue是目前前端框架中非常火热的框架，基于此，在Vue的基础上诞生的框架也是丰富多彩，相信也有很多小伙伴也和我一样比较喜爱Vue这一个框架，而且在不久的将来Vue也将发布3.0版本，届时将带来更多丰富的用法，拭目以待！

php表单填写源码

上一篇：如何通过FORScan修改福特汽车系统模块内置数据
下一篇：php使用file_get_contents(‘php://input‘)和$_POST的区别

专为Vue打造的开源表单验证框架，Github star7k+——VeeValidate

介绍

Github地址

特性简介

安装和使用

总结

相关推荐

Linux环境中查看Oracle错误和警告日志信息

絮语----工作四年的碎碎念

SQL 中的 (+)用法

oracle常见问题处理

MYSQL经典面试题汇总

医院信息系统突发应急演练记录

Windows 11:已知问题和已解决问题列表(更新时间:2022年1月)

最全面的IBMS系统集成系统技术规格书，赶紧收藏起来!

苹果停止更新Windows版QuickTime!

Linux下开源BI工具Metabase本地化安装及配置详解