使用vue中的混入mixin优化表单验证插件问题

这段时间开发的时候使用到了这个表单校验插件，用起来比较麻烦就不说了，还有较严重的缺陷。自己最终还是抽空把这个插件进行了一些优化，虽然优化的方式和当初自己定下的方向不怎么相同，但是就使用体验上来说还是提高了很多。

1. 实际开发中遇到的问题

在上面的文章中提及了一些表单插件的问题，主要针对的是插件开发本身存在的问题。下面我总结下使用中存在的问题:

每个使用表单校验的元素都需要添加 v-check 类名，比较麻烦。

必须在提交表单按钮上使用 v-checkSubmit 指令进行表单校验，提交函数必须命名为 submit() ，而且二者还是绑定的。

无法在一个组件里面多次使用校验函数，无法自定义校验的表单范围。（严重问题）

2. 对问题进行分析

一开始我的目标是按照之前计划的方向，研究如何使用事件订阅发布来实现表单校验，但是评估之后这种方式会对现有的代码改动较大，因为我项目已经几处用了当前的校验方法，遂放弃这个方向。

经过查阅资料和思考，我发现vue本身是没有直接处理、生成dom元素的api。所以当前的这种方法（根据校验结果添加类名 input-error ，并追加错误信息元素）虽然不优雅，但是确实最简单有效的方式了。在这个基础上针对上面列出的几个问题，我分别整理了解决的思路：

v-check

3. 实现

绑定自定义指令的时候添加 v-check

import Vue from 'vue'export default { install: (Vue, options) => { Vue.directive('validateParams', {  inserted: function (el, binding, vNode) {  /*  * 解决办法只需添加下面这一行代码即可  * el即为当前指令绑定的元素，classList.add可以给元素添加类名  */  el.classList.add('v-check');  el.addEventListener('blur', function (event) {   // ...  })  } }); }}

定义公共的表单校验方法

如何在vue typescript中使用mixin呢

// mixin.tsimport { Component, Vue } from 'vue-property-decorator';@Component({})export class Demo extends Vue { public A: string = 'A'; public doSomething () { }}// component<template></template><script lang="ts">import { Component, Vue, Mixins } from 'vue-property-decorator';import { Demo } from 'mixin.ts';@Component({})export class App extends Mixins(Demo) { private created() { console.log(this.A); // 会打印出A }}</script>

下面我们实践，在表单插件中定义这个被mixin的校验方法

@Component({})export class ValidatorMixin extends Vue { /* * 定义一个GValidate方法，可以接受一个元素节点参数 * 参数定义了表单函数校验的范围 */ public GValidate(validateEl?: HTMLElement) { // 默认是查找当前组件实例内的.v-check元素，this.$el表示当前组件 let elements = this.$el.querySelectorAll('.v-check'); if ( validateEl ) {  // 有参数时，规定了校验的范围  elements = validateEl.querySelectorAll('.v-check'); } const evObj = document.createEvent('Event'); evObj.initEvent('blur', true, true); if (elements) {  for (const element of elements) {  element.dispatchEvent(evObj);  } } // 还是查找.input-error元素，以此来判断检验结果 let errorInputs = this.$el.querySelectorAll('.input-error'); if (validateEl) {  errorInputs = validateEl.querySelectorAll('.input-error'); } // 将校验的结果返回 if (errorInputs.length !== 0) {  return false; } else {  return true; } }}