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

前端  /  管理员 发布于 4年前   279

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

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

下面我们实践，在表单插件中定义这个被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; } }}

定义了上面的校验方法之后，可以将原插件里面定义 v-checkSubmit 指令的部分删除了。

4. 优化后的使用

// rules.tsexport const required = (message) => ({ message, required: true});export const min = (message, length=3) => ({ message, min: length})export const max = (message, length=15) => ({ message, max: length})export const pattern = (message, reg) => ({ message, pattern: reg})// form.vue

我们可以看到这种方式提供了一个可以访问当前组件的公共方法。当我们想校验的时候，只需要引入并使用这个方法即可。通过这种方式的改造，将表单插件内部逻辑和校验过程独立开了。校验函数只返回校验的结果，我们可以拿到这个校验结果接着写任何自己想要的逻辑，使用起来更方便。

总结

以上所述是小编给大家介绍的使用vue中的混入mixin优化表单验证插件,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

您可能感兴趣的文章:

• 详解vue项目中如何引入全局sass/less变量、function、mixin
• Vue中的混入的使用(vue mixins)
• Vue 中mixin 的用法详解
• 详解Vue 中 extend 、component 、mixins 、extends 的区别
• 详解vue mixins和extends的巧妙用法
• 在Vue.js中使用Mixins的方法
• 详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
• vue mixins组件复用的几种方式（小结）
• vue表单验证你真的会了吗？vue表单验证（form）validate
• vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
• vue中使用element-ui进行表单验证的实例代码
• Vue使用vux-ui自定义表单验证遇到的问题及解决方法
• element 结合vue 在表单验证时有值却提示错误的解决办法
• Vue ElementUI之Form表单验证遇到的问题