(转载)vue表单验证插件vva-js

boJIke

于 2021-10-13 10:01:27 发布

阅读量569

点赞数

分类专栏： vue 前端文章标签： vue.js javascript html5

原文链接：https://www.jianshu.com/p/70e656ebdeba

版权

前端同时被 2 个专栏收录

20 篇文章 1 订阅

订阅专栏

vue

12 篇文章 0 订阅

订阅专栏

作者分享了自己初次编写Vue表单验证插件的经验，包括目标、实现思路和遇到的问题。主要目标是根据用户定义的规则进行表单验证，验证通过后触发用户指定的回调函数。在实现过程中，作者自定义了指令并实现了校验逻辑，同时使用了气泡提示工具。不过，作者认识到vva.js和tooltip.js之间的耦合过高，希望进一步优化。此外，还提到了未来改进的方向，如实现更灵活的回调调用方式。

摘要由CSDN通过智能技术生成

最近写了一个vue的表单验证插件，第一次写插件，其中的一些设计模式不够优化，产品逻辑不够成熟，但作为自己的第一个完成的插件，写完了还是觉得小有收获的，特此记录。

目标
主要目标：将需要绑定验证的表单元素根据绑定的规则进行验证，验证通过则可进行表单提交（规则通过后由用户编写通过后程序逻辑）

整体思路
在这里插入图片描述

具体思路
1.vue实例中自定义部分
表单验证主要需要三种信息：1.用户自定义规则；2.提示信息；3.验证的时机
每条输入的规则可能是多个的，对应的提示信息也不相同，此处均供用户自己填写，形如

<input type="text" id="test" v-vva:test="{length: /^.{5}$/, valid: /^\w+$/}" v-vva-msg="{length: '长度必须为五个字符', valid: '必须位有效字符'}">
<input type="button" v-vva-check value="校验">

下面参照vue自定义指令文档说明来解释一下：
在这里插入图片描述
v-vva为自定义指令，:test （arg）为验证规则名称，每个实例中验证规则名称必须确保唯一性，{length: /^.{5} $KaTeX parse error: Undefined control sequence: \w at position 13: /, valid: /^\̲w̲+$ /} （value）为用户自定义的规则，其中属性名代表用户为每个规则添加的标识，和v-vva-msg中相互对应。v-vva-msg为用户自定义的提示信息，根据不同的未成功校验的值显示对应的提示信息。
点击含有v-vva-check指令的元素后将对每个添加有v-vva指令的元素进行校验。校验通过后，会调用该vue实例的vva_submit()方法，如：

methods: {
    vva_submit: function() {
      alert('已经成功通过校验')
    }
  }

实际上这地方我是想可以实现v-vva-check="fn"的形式，当通过校验后调用fn，无奈作为vue小白一枚，这里的value出现问题，因此先采用这样的权宜之计，以后再分析问题原因。

2.vva.js
vue文档中说明，编写vue插件需要提供install方法，因此主要在install中添加事件监听方法和自定义指令。
我想实现这种效果：点击校验按钮，未通过校验的输入框均为红框，提示消息出现在第一个红框上，之后用户每次更改输入值均会进行校验，提示消息始终出现在第一个未通过校验的输入框中，若第一个输入值已通过校验，提示消息会提示剩下未通过校验的第一个输入框。
写了几天的代码，今天回想起来，在vva.js中主要也就做了两件事：

校验未通过则增加标识类名
利用观察者连接未通过的表单元素与提示消息框
剩下的也就是校验逻辑，何时生成消息、何时调用消息、何时摧毁消息，以及各个功能的细化拆分以及提升鲁棒性。
反思一下，写这样的程序必须要对整个事件的流程和设计有一个清晰的规划。这一点我开始没有做好，绕了不少弯子。

3.tooltip.js
校验未通过后调用的气泡工具，提供显示、隐藏、生成、摧毁的功能。
项目地址参见Git

不满意的地方：除了文中提到的通过校验后的调用方法外，vva.js和tooltip.js未做到完全分离，实际上vva.js应该只做校验的事情，vva.js与tooltip.js之间的耦合的越少越好，然而在vva.js中出现了多次生成、摧毁冒泡的地方，这样的方式不够干净。

作者：小前seant
链接：https://www.jianshu.com/p/70e656ebdeba
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。