使用vue自定义指令开发表单验证插件validate.js

这段时间在进行一个新项目的前期搭建，新项目框架采用vue-cli3和typescirpt搭建。因为项目比较轻量，所以基本没有使用额外的ui组件，有时候我们需要的一些基础组件我就直接自己开发了。今天就来介绍一下如何利用vue的自定义指令directive来开发一个表单验证插件的过程。

1.vue插件开发

关于vue的插件开发，官方文档里有很清晰的说明，详情可以去阅读开发文档。我自己开发的表单验证插件validate.ts和loading，messageBox插件都是利用了这种方式。今天先来看表单验证插件的开发。

vue全局指令

// myPlugin.jsexport default { install: (Vue, options) => { // 注册一个my-directive指令 Vue.directive('my-directive', {  bind(el, binding, vnode, oldVnode) {  // 逻辑  }  ... }) }}// main.jsimport Vue from 'vue';import myPlugin from 'myPlugin';Vue.use(myPlugin);

上面是注册一个vue指令插件的写法。值得注意的是注册自定义指令的时候，bind()函数为指令的钩子函数，其中的参数el表示指令绑定的元素，可以直接操作DOM。binding表示一个对象，包括指令名称，绑定值等信息。vnode和oldVnode表示Vue编译生成的虚拟节点。

我们通过注册一个全局指令v-validateParams指令，绑定到输入表单的input标签上来校验当前输入值是否符合要求。

2.v-validateParams指令

最开始我参考了网上的一些代码。基础的实现如下：

整体框架

import Vue from 'vue'export default { install: (Vue, options) => { // 注册一个全局自定义指令 `v-validateParams` Vue.directive('validateParams', {  // 当被绑定的元素插入到 DOM 中时  inserted: function (el, binding, vNode) {  // 给指令绑定的Dom元素添加事件监听，监测输入框失焦事件  // 每次当表单中的输入框失焦时执行函数  el.addEventListener('blur', function (event) {   // 1.首先重置所有错误提示   // 2.获取自定义指令中传入的校验规则参数和表单输入的值   // 3.依次判断当前输入的值是否符合校验规则  })  } }) // 注册一个全局自定义指令 `v-validateSubmit`，这个指令绑定到表单的提交button上 Vue.directive('validateSubmit', {  // 当被绑定的元素插入到 DOM 中时  inserted: function (el, binding, vNode) {  // 给提交button添加事件监听  el.addEventListener('click', function (event) {   // 获取当前组件内所有含有v-check类名的元素   let elements = vNode.context.$el.getElementsByClassName('v-check')   var evObj = vNode.context.$el.createEvent('Event')   evObj.initEvent('blur', true, true)   for (let element of elements) {   // 给所有v-check元素绑定blur事件   element.dispatchEvent(evObj);   }   // 获取当前组件下的所有错误提示元素   let errorInputs = vNode.context.$el.getElementsByClassName('input-error');   // 如果组件中没有错误提示元素，则执行当前组件实例中的submit()函数   if(errorInputs.length === 0){   vNode.context.submit();   }  })  } }) }}