使用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 相关文章推荐
JQuery 学习笔记 选择器之四
Jul 23 Javascript
JS实现简单的Canvas画图实例
Jul 04 Javascript
类似php的js数组的in_array函数自定义方法
Dec 27 Javascript
详解JavaScript中jQuery和Ajax以及JSONP的联合使用
Aug 13 Javascript
jquery实现简单的全选和反选功能
Jan 02 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
Mar 24 Javascript
js简单实现网页换肤功能
Apr 07 Javascript
jQuery 实现鼠标画框并对框内数据选中的实例代码
Aug 29 jQuery
微信小程序视图容器(swiper)组件创建轮播图
Jun 19 Javascript
js实现web调用摄像头 js截取视频画面
Apr 21 Javascript
vue项目里面引用svg文件并给svg里面的元素赋值
Aug 17 Javascript
Vue中nprogress页面加载进度条的方法实现
Nov 13 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学习笔记(三)操作符与控制结构
2011/08/06 PHP
php的urlencode()URL编码函数浅析
2011/08/09 PHP
phpphp图片采集后按原路径保存图片示例
2014/02/18 PHP
新浪SAE云平台下使用codeigniter的数据库配置
2014/06/12 PHP
PHP6连接SQLServer2005的三部曲
2016/04/15 PHP
PHP 用session与gd库实现简单验证码生成与验证的类方法
2016/11/15 PHP
常用的JS验证和函数汇总
2014/12/23 Javascript
日常收集整理的JavaScript常用函数方法
2015/12/10 Javascript
jQuery遮罩层效果实例分析
2016/01/14 Javascript
Angularjs中UI Router全攻略
2016/01/29 Javascript
解析Node.js异常处理中domain模块的使用方法
2016/02/16 Javascript
理解javascript模块化
2016/03/28 Javascript
JavaScript实现的CRC32函数示例
2016/11/23 Javascript
详解node HTTP请求客户端 - Request
2017/05/05 Javascript
webpack实现热更新(实施同步刷新)
2017/07/28 Javascript
checkbox:click事件触发span元素内容改变的方法
2017/09/11 Javascript
Three.js实现绘制字体模型示例代码
2017/09/26 Javascript
浅谈如何使用 webpack 优化资源
2017/10/20 Javascript
微信小程序实现滴滴导航tab切换效果
2018/07/24 Javascript
vue router 配置路由的方法
2018/07/26 Javascript
详解jenkins自动化部署vue
2019/05/14 Javascript
微信小程序在ios下Echarts图表不能滑动的问题解决
2019/07/10 Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
2020/05/19 Javascript
[01:23:35]Ti4主赛事胜者组 DK vs EG 1
2014/07/19 DOTA
Python HTTP客户端自定义Cookie实现实例
2017/04/28 Python
Python Excel处理库openpyxl使用详解
2019/05/09 Python
Python 中的 global 标识对变量作用域的影响
2019/08/12 Python
Python列表元素常见操作简单示例
2019/10/25 Python
娇韵诗加拿大官网:Clarins加拿大
2017/11/20 全球购物
高考寄语大全
2014/04/08 职场文书
物业管理专业求职信
2014/06/11 职场文书
志愿者宣传口号
2014/06/17 职场文书
中学生运动会通讯稿大全
2014/09/18 职场文书
辞职信标准格式
2015/02/27 职场文书
Golang Gob编码(gob包的使用详解)
2021/05/07 Golang
在Python中如何使用yield
2021/06/07 Python