百度360必应搜狗淘宝本站头条
分布式事务框架grpc框架shiro框架java日志框架框架图
当前位置：网站首页 > 技术文章 > 正文

值得推荐，Vue.js基于模板的表单验证框架，非常实用

ccwgpt 2024-10-27 08:35 27 浏览 0 评论

介绍

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版本，届时将带来更多丰富的用法，拭目以待！

    相关推荐

    ForkJoinPool的了解与使用（fork-join）

    ForkJoinPool是一个强大的Java类，用于处理计算密集型任务。使用ForkJoinPool分解计算密集型任务并并行执行它们以获得更好的Java应用程序性能。它的工作原理是将任务分解为更小的子...

    Netty 时间轮源码解析（时间轮java实现）

    定时任务在中间件和业务系统中有很多应用，比如：注册中心中定期上报状态的心跳机制。RPC框架中定期扫描请求列表移除超时请求。延迟队列提交未来时间的任务。业务系统每日凌晨跑批处理或报表任务。Java原...

    Autodesk基于Mesos的通用事件系统架构

    【编者按】本文由AutodeskCloud软件架构师OlivierPaugam撰写，解释了如何集合Mesos、Kafka、RabbitMQ、Akka、Splunk、Librato、EC2等基础设施...

    全局视角看技术-Java多线程演进史

    作者：京东科技文涛全文较长共6468字，语言通俗易懂，是一篇具有大纲性质的关于多线程的梳理，作者从历史演进的角度讲了多线程相关知识体系，让你知其然知其所以然。前言2022年09月22日，JDK19发...

    为什么应该使用Dapr来构建事件驱动的微服务?

    微服务架构从本质上来说是分布式的。构建微服务总是会遇到极具挑战性的问题，比如说弹性服务调用、分布式事务处理、按需扩容以及严格一次(exactly-once)的消息处理。将微服务放在Kubernet...

    WEB前端开发学习流程（web前端开发简明教程）

    相对web后端开发来说,web前端开发对大部分初学编程者比较友好，而且入门门槛低，就业范围广。是大部分转行学IT的一个首选方向。web前端开发工程师，主要进行网站浏览器的开发、优化、布局的工作。在了解...

    《s24z 编程指南》大纲(AI 提示词)

    由于AIGC的迅速发展，本教程《s24z编程指南》，尝试用如下方法：准备《编程指南》的大纲，按章节划分，每小节由相关知识点和文字组成。每次将一小部分文本，以提示词的形式，送入Kimi或Ch...

    有哪些常用的Python后端开发框架?

    以下为你介绍一些常用的Python后端开发框架，包含各自的特点、适用场景与示例代码：Flask特点：轻量级、灵活，核心代码简洁，几乎不强制开发者使用特定的工具和库，开发者可按需添加扩展。适用场景...

    数学分析的结构（数学分析的结构方法）

    一、基础结构层实数系统与集合论数学分析的根基建立在实数连续之上，通过集合论（如公理化集合论）定义数学对象的抽象结构。例如，实数集的完备性公理是数学分析区别于其他数学分支的关键特征。此外，点集拓扑学（如...

    新手在学习Web前端时需要学习的内容汇总

    Web前端开发因为入行门槛低，是很多人转行IT开发行业的首选，但想要成为一名合格的Web前端开发工程师同样要具备过硬的专业技能，而且想要学成后高薪快速的就业，过硬的技术是基本条件。那么，新手小白学习W...

    基于 Kotlin KMP 实现 HarmonyOS 与 Android 双平台 SDK 开发实践

    背景随着鸿蒙平台的进一步发展，大家的态度也逐渐从观望转向实际投入，越来越多的公司开始考虑将自家应用迁移到鸿蒙平台。但是这一过程并非想象中的那么简单，尤其对于已经存在很多年的大型项目来说，直接投入大量人...

    爱奇艺 App 中台技术实践（爱奇艺 app 中台技术实践在哪）

    本文来自爱奇艺研究员在ArchSummit全球架构师峰会上的演讲整理,将为大家分享爱奇艺打造移动中台的过程。爱奇艺移动中台的建设过程可分为组件解耦、组件定制化和平台化，未来会利用平台发现、沉淀和复...

    软件开发|同样的功能需求，为什么有的软件公司报价高?有的低?

    最近有个朋友问我：同样的功能需求，为什么有的公司报价高？有的公司报价低？其实，有很多创业的朋友，在寻找技术开发公司的时候，经常会遇到这个困惑，一样的功能需求，不同的公司有不同的报价，有的差别还很大，那...

    零基础要怎么学习Web前端?Web前端学习路径分享

    Web前端因为薪资高、入行门槛低，成为很多人转行进入IT行业的首选。对于零基础的人来说，学习之前一定要想清楚为什么而学习Web前端，给自己一个清晰的定位，摆正心态。如果还不清楚学习路线，可以参考千锋武...

    MICROCHIP/微芯 KSZ9031RNXIA 以太网芯片

    特征o适用于IEEE802.3应用的单片10/100/1000Mbps以太网收发器oGMII/MII标准接口，3.3V/2.5V/1.8V容错I/Oo自动协商以自动选择最高链路连接速度（10/10...

    取消回复欢迎 你 发表评论:

    一周热门
    最近发表
    标签列表