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


Posted in Javascript onJuly 02, 2019

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

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.ts
import { 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;
 }
 }
}

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

4. 优化后的使用

// rules.ts
export 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
<template>
 <div>
 <div class="form-item" ref="userName">
  <label for="userEmail">用户名:</label>
  <input id="userEmail" type="text" v-model="userName"
  v-validateParams="[inputNameRequired, inputNameMin, inputNameMax, inputNamePattern]">
 </div>
 <button class="btn" type="success" @click="submit">确认</button>
 </div>
</template>
<script lang='ts'>
import { Component, Vue, Prop, Mixins } from 'vue-property-decorator';
import { max, min, required, name, pattern} from 'rules';
import { yourMixin } from 'yourMixin.ts';
@Component({})
export default class Auth Mixins(youMixin) {
 private userName: string = '';
 private inputNameMax = max('请不要超过20个字符');
 private inputNameMin = min('请不要小于3个字符');
 private inputNameRequired = required('请输入用户名');
 private inputNamePattern = pattern('请输入符合要求的用户名', /^[a-zA-Z0-9_-]{4,16}$/);
 private submit() {
 const validRes = this.GValidate(); // 全局校验
 const userNameValidRes = this.GValidate(this.$refs.userName); // 单独校验某个表单
 if (validRes && userNameValidRes) {
  alert('通过校验');
 } else {
  alert('校验失败');
 }
 }
}
</script>

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

总结

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

Javascript 相关文章推荐
一个tab标签切换效果代码
Mar 27 Javascript
JS中confirm,alert,prompt函数使用区别分析
Apr 01 Javascript
js String对象中常用方法小结(字符串操作)
Jan 27 Javascript
Javascript中string转date示例代码
Nov 01 Javascript
js实现九宫格图片半透明渐显特效的方法
Feb 16 Javascript
jQuery实现折线图的方法
Feb 28 Javascript
javascript ASCII和Hex互转的实现方法
Dec 27 Javascript
快速搭建React的环境步骤详解
Nov 06 Javascript
Vue+Element实现动态生成新表单并添加验证功能
May 23 Javascript
javascript定时器的简单应用示例【控制方块移动】
Jun 17 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
Sep 06 Javascript
基于vue和bootstrap实现简单留言板功能
May 30 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
Jul 02 #Javascript
简单了解微信小程序的目录结构
Jul 01 #Javascript
vue如何实现自定义底部菜单栏
Jul 01 #Javascript
微信小程序如何利用getCurrentPages进行页面传值
Jul 01 #Javascript
vue中的面包屑导航组件实例代码
Jul 01 #Javascript
Vue动态面包屑功能的实现方法
Jul 01 #Javascript
vue实现自定义H5视频播放器的方法步骤
Jul 01 #Javascript
You might like
PHP_Cooikes不同页面无法传递的解决方法
2014/03/07 PHP
浅析php适配器模式(Adapter)
2014/11/25 PHP
PHP使Laravel为JSON REST API返回自定义错误的问题
2018/10/16 PHP
PHP切割整数工具类似微信红包金额分配的思路详解
2019/09/18 PHP
jquery下异步提交表单 异步跨域提交表单
2010/11/17 Javascript
js Dialog 实践分享
2012/10/22 Javascript
js实现一个省市区三级联动选择框代码分享
2013/03/06 Javascript
Ext修改GridPanel数据和字体颜色、css属性等
2014/06/13 Javascript
jQuery中:button选择器用法实例
2015/01/04 Javascript
JavaScript在网页中画圆的函数arc使用方法
2015/11/13 Javascript
requireJS模块化实现返回顶部功能的方法详解
2017/10/16 Javascript
Javascript读取上传文件内容/类型/字节数
2019/04/30 Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
2019/05/29 Javascript
vue项目实现图片上传功能
2019/12/23 Javascript
vue.js+ElementUI实现进度条提示密码强度效果
2020/01/18 Javascript
原生JS实现萤火虫效果
2020/03/07 Javascript
Python中使用gzip模块压缩文件的简单教程
2015/04/08 Python
Windows下安装python MySQLdb遇到的问题及解决方法
2017/03/16 Python
python获取外网IP并发邮件的实现方法
2017/10/01 Python
python3写爬取B站视频弹幕功能
2017/12/22 Python
基于python requests库中的代理实例讲解
2018/05/07 Python
tensorflow 获取模型所有参数总和数量的方法
2018/06/14 Python
Python SVM(支持向量机)实现方法完整示例
2018/06/19 Python
基于Python的ModbusTCP客户端实现详解
2019/07/13 Python
django最快程序开发流程详解
2019/07/19 Python
python实现桌面气泡提示功能
2019/07/29 Python
python argparse模块通过后台传递参数实例
2020/04/20 Python
Python如何合并多个字典或映射
2020/07/24 Python
新媒传信软件测试面试题
2013/02/24 面试题
介绍信的写法
2015/01/31 职场文书
英文自荐信范文
2015/03/25 职场文书
雷锋电影观后感
2015/06/10 职场文书
高中生社会实践心得体会
2016/01/14 职场文书
python numpy中multiply与*及matul 的区别说明
2021/05/26 Python
在Python中如何使用yield
2021/06/07 Python
浅谈MySQL next-key lock 加锁范围
2021/06/07 MySQL