资讯专栏INFORMATION COLUMN

写一个简单易用可扩展vue表单验证插件(vue-validate-easy)

ccj659 / 2396人阅读

摘要:写一个表单验证插件需求目标简单易用可扩展如何简单开发者要做的写了一个表单,指定一个,指定其验证规则。调用提交表单方法,可以获取验证成功后的数据。

写一个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)

    摘要:写一个表单验证插件需求目标简单易用可扩展如何简单开发者要做的写了一个表单,指定一个,指定其验证规则。调用提交表单方法,可以获取验证成功后的数据。 写一个vue表单验证插件(vue-validate-easy) 需求 目标:简单易用可扩展 如何简单 开发者要做的 写了一个表单,指定一个name,指定其验证规则。 调用提交表单方法,可以获取验证成功后的数据。 调用重置表单方法重置表单 自...

    ISherry 评论0 收藏0
  • 一个简单易用扩展vue表单验证插件(vue-validate-easy)

    摘要:写一个表单验证插件需求目标简单易用可扩展如何简单开发者要做的写了一个表单,指定一个,指定其验证规则。调用提交表单方法,可以获取验证成功后的数据。 写一个vue表单验证插件(vue-validate-easy) 需求 目标:简单易用可扩展 如何简单 开发者要做的 写了一个表单,指定一个name,指定其验证规则。 调用提交表单方法,可以获取验证成功后的数据。 调用重置表单方法重置表单 自...

    keke 评论0 收藏0
  • 杂篇 - Vue豆瓣系列文章

    摘要:起初,项目使用的是,其提供的方法用着比较爽,由于项目的很多数据来自豆瓣的,直接上简单方便,跨域什么的不考虑。跨域问题,上面已经介绍,在不能操控的豆瓣数据上,使用的是。 项目地址 在线演示 不识庐山真面目,只缘身在此山中。 大概一个月前,开源了Vue重构豆瓣移动端的项目,效果还可以,收到了很多小伙伴的反馈,话说是要写一些文章的,但迟迟没有动笔,估计小伙伴们等的花都谢了,拖延症是病,需要治...

    lijinke666 评论0 收藏0
  • 前端相关汇总

    摘要:简介前端发展迅速,开发者富有的创造力不断的给前端生态注入新生命,各种库框架工程化构建工具层出不穷,眼花缭乱,不盲目追求前沿技术,学习框架和库在满足自己开发需求的基础上,然后最好可以对源码进行调研,了解和深入实现原理,从中可以获得更多的收获随 showImg(https://segmentfault.com/img/remote/1460000016784101?w=936&h=397)...

    BenCHou 评论0 收藏0
  • javascript功能插件大集合,前端的亲们记得收藏

    摘要:一个专注于浏览器端和兼容的包管理器。一个整合和的最佳思想,使开发者能快速方便地组织和编写前端代码的下一代包管理器。完全插件化的工具,能在中识别和记录模式。健壮的优雅且功能丰富的模板引擎。完整的经过充分测试和记录数据结构的库。 【导读】:GitHub 上有一个 Awesome – XXX 系列的资源整理。awesome-javascript 是 sorrycc 发起维护的 JS 资源列表...

    cfanr 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<