va.js—Vue 表单验证插件的写作过程

前言

前段时间，老大搭好了Vue的开发环境，于是我们愉快地从JQ来到了Vue。这中间做的时候，在表单验证上做的不开心，看到vue的插件章节，感觉自己也能写一个，因此就自己开始写了一个表单验证插件va.js。 当然为什么不找个插件呢？ vue-validator呀。

我想了下，一个是表单验证是个高度定制化的东西，这种网上找到的插件为了兼顾各个公司的需求，所以加了很多功能，这些我们不需要。事实证明，vue-validator有50kb，而我写的va.js只有6kb。

另一个是，vue-validator的api我真的觉得长, 动不动就v-validate:username="['required']"，这么一长串，而我设计的调用大概如——v-va:Money

当然，本文仅是展示下，如何写个满足自己公司需求的vue表单验证插件。下面介绍下思路。

一、表单验证模块的构成

任何表单验证模块都是由 配置——校验——报错——取值 这几部分构成的。

配置： 配置规则 和配置报错，以及优先级

校验： 有在 change 事件校验， 在点击提交按钮的时候校验， 当然也有在input事件取值的

报错： 报错方式一般要分，报错的文字有模板，也有自定义的

取值： 将通过验证的数据返还给开发者调用

下面是我老大针对公司项目给我提出的要求

集中式的管理 校验规则 和 报错模板。

报错时机可选

校验正确后的数据，已经打包成对象，可以直接用

允许各个页面对规则进行覆盖，对报错信息进行自定义修改，以及允许ajax获取数据后，再对规则进行补充

我就很好奇地问， 为什么要这样子呢？然后老大就跟我一条一条解答：

集中式管理规则，和报错模板的好处，就是规则可以全局通用，一改全改。老大跟我说，光是昵称的正则就改了三次。如果这些正则写在各个页面，o(￣ヘ￣o#)哼，你就要改N个页面了

pc和移动的流程不一样，pc很多校验都要在change事件或者input事件就校验并报错了，而移动则一般是要到提交按钮再进行校验。所以写插件的时候要做好两手准备。然后，报错用的ui要可以支持我们现在用的layer插件。当然以后这个报错的ui也可能变，所以你懂滴。

当然原来jq时代，我们的公用表单验证，就能验证完了，把数据都集合到一个对象里。这样ajax的时候，就不用再去取值了。你这个插件耶要达到这个效果

原来jq的那个公用脚本，正则和报错都集中到一个地方去了，在很多地方已经很方便了。但是在一些页面需要改东西的时候还不够灵活。像RealName这个规则，最早是针对某个页面配置的，用的是后端接口上的字段名。另一个支付页，后端接口上的字段名改成了PayUser了，但是正则还是RealName的，原来我们是要复写一下RealName。这个就不太方便也不好看了。另外一个，支付金额，有最大值和最小值的限制，这个需要从后端获取的。你也要考虑这个情况。要做到各个页面上也能有一些灵活的地方可以修改规则，自定义报错等等。

我听了之后，大致懂了，原来之前自己写的jq表单验证还有这么多不舒服的点。-_-|||接下来，是看看vue给我的好东西。让我来写

二、Vue 的插件怎么写

我一个vue小白，怎么就开始写vue插件了呢？那是因为想解决方案的时候，翻Vue文档翻到了这里

这些东东，等我写完va.js的时候，感觉尤大写的真的是很清楚了。

其实我是想写个指令来完成表单验证的事的。结果发现可能有2-3个指令，而且要再Vue.prototype上定义些方法，好让各个子实例内部也能拓展规则。于是老大说，这就相当于插件了。这让我很是吃鲸。

va.js主要用的是 Vue指令

这些东东，等我写完va.js的时候，感觉尤大写的真的是很清楚了。

其实我是想写个指令来完成表单验证的事的。结果发现可能有2-3个指令，而且要再Vue.prototype上定义些方法，好让各个子实例内部也能拓展规则。于是老大说，这就相当于插件了。这让我很是吃鲸。

va.js主要用的是 Vue指令

Vue 文档真的写得很用心，但是我再补充一点吧
vnode.context 就是Vue的实例
我们做项目的时候，经常一个根组件上挂着N个子组件，子组件上又可能挂着N个子组件。vnode.context获取的实例，是绑定该指令的组件的实例。这个就相当好用了。你可以做很多事情

当然还用了点Vue.prototype

Vue.prototype.$method 就是可以在各个组件上调用的方法。可以在组件内部用 this.$method调用的