摘要：写一个表单验证插件需求目标简单易用可扩展如何简单开发者要做的写了一个表单，指定一个，指定其验证规则。调用提交表单方法，可以获取验证成功后的数据。
写一个vue表单验证插件(vue-validate-easy) 需求
目标：简单易用可扩展
如何简单 开发者要做的写了一个表单，指定一个name，指定其验证规则。
调用提交表单方法，可以获取验证成功后的数据。
调用重置表单方法重置表单
自定义验证方法
程序应该做的获取表单元素，绑定事件
有输入时，获取表单值，使用开发者指定的规则进行验证，若验证错误给予错误提示。
实现方法获取原生表单元素，vue指令获取到的是包裹原生表单元素的外层元素，这里我使用data-type属性来获取原生表单元素
验证规则，验证参数，自定义错误提示语 由 vue的指令值来获取
提交时，我们需要一个表单标识，这里我使用了data-scope属性来对表单进行分组
重置，通过data-scope重置整个表单
常用方法懒验证，通过.lazy指令修饰符
远程验证, 通过async await
延时验证, .deay指令修饰符，和data-delay属性
表单主动验证，单字段主动验证
单字段表单重置
可扩展错误消息自定义
验证方法自定义
错误提示处理自定义
自定义表单元素（不借助原生元素）
完成后的使用代码// 你只要指定 data-scope data-name data-type v-validate-easy 这四个属性的值，然后通过调用this.V.$submit(scope)就可以进行提交表单了
methods: {
reset(scope) {
this.V.$reset(scope)
},
submit(scope) {
this.V.$submit(scope, (canSumit,data) => {
// canSumit为true时，则所有该scope的所有表单验证通过
if(!canSumit) return
// 发送请求
axios({ url: "/test",data, method: "post"})
.then(() => {
// 成功响应处理
})
.catch(() => {
// 错误处理
})
})
}
},
对自定义组件使用，就更加简洁
vue-validate-easy github地址
欢迎大家star，对该项目有什么问题和建议，欢迎提issue
vue-validate-easy 文档地址文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/113091.html
摘要：写一个表单验证插件需求目标简单易用可扩展如何简单开发者要做的写了一个表单，指定一个，指定其验证规则。调用提交表单方法，可以获取验证成功后的数据。 写一个vue表单验证插件(vue-validate-easy) 需求 目标：简单易用可扩展 如何简单 开发者要做的 写了一个表单，指定一个name，指定其验证规则。 调用提交表单方法，可以获取验证成功后的数据。 调用重置表单方法重置表单 自...
摘要：写一个表单验证插件需求目标简单易用可扩展如何简单开发者要做的写了一个表单，指定一个，指定其验证规则。调用提交表单方法，可以获取验证成功后的数据。 写一个vue表单验证插件(vue-validate-easy) 需求 目标：简单易用可扩展 如何简单 开发者要做的 写了一个表单，指定一个name，指定其验证规则。 调用提交表单方法，可以获取验证成功后的数据。 调用重置表单方法重置表单 自...
摘要：起初，项目使用的是，其提供的方法用着比较爽，由于项目的很多数据来自豆瓣的，直接上简单方便，跨域什么的不考虑。跨域问题，上面已经介绍，在不能操控的豆瓣数据上，使用的是。 项目地址 在线演示 不识庐山真面目，只缘身在此山中。 大概一个月前，开源了Vue重构豆瓣移动端的项目，效果还可以，收到了很多小伙伴的反馈，话说是要写一些文章的，但迟迟没有动笔，估计小伙伴们等的花都谢了，拖延症是病，需要治...
摘要：一个专注于浏览器端和兼容的包管理器。一个整合和的最佳思想，使开发者能快速方便地组织和编写前端代码的下一代包管理器。完全插件化的工具，能在中识别和记录模式。健壮的优雅且功能丰富的模板引擎。完整的经过充分测试和记录数据结构的库。 【导读】：GitHub 上有一个 Awesome – XXX 系列的资源整理。awesome-javascript 是 sorrycc 发起维护的 JS 资源列表...
阅读 1572·2021-11-24 09:39
阅读 3020·2021-11-22 15:24
阅读 3064·2021-10-26 09:51
阅读 3252·2021-10-19 11:46
阅读 2868·2019-08-30 15:44
阅读 2188·2019-08-29 15:30
阅读 2519·2019-08-29 15:05
阅读 750·2019-08-29 10:55
