前端利器 · 一文读懂 Vue Element UI VeeValidate 全局表单验证封装（详细教程）

一篇学会 veevalidate 表单验证

文章解析

前端开发表单验证必不可少本文章讲解 VeeValidate 表单验证封装实现全局表单验证

网络上有关 veevalidate 最新版例子少之又少，本文章基于最新版本 veevalidate 进行详细解析
对近期接触的表单验证框架做相关评价

Element UI 和 VeeValidate 对比

Element UI Vue 开发比较好用的UI框架
Element UI：自带了表单验证功能，使得页面样式、表单验证一体化、实现高效前端开发
在多个字段名相同情况下可以实现快速开发重复使用
缺点：新字段需要增加新规则，不适于封装，页面代码比较繁琐

VeeValidate：自定义规则，全局任意使用
缺点：需要手动配置文件

实现思路

在这里插入图片描述

Element UI 表单样式

VeeValidate 表单验证表单清空

vee validate 不同版本使用教程不同本文章使用 3.2.5 版本

封装步骤

安装veevalidate

yarn
yarn add vee-validate

#npm
npm install vee-validate --save

#CDN
<!-- jsdelivr cdn -->
<script src="https://cdn.jsdelivr.net/npm/vee-validate@latest/dist/vee-validate.js"></script>

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

创建 veevalidate.js