vue 使用自定义指令实现表单校验的方法


Posted in Javascript onAugust 28, 2018

笔者近期在公司的项目中使用自定义指令完成了表单校验。

这里将思路分享给大家,并写了一个小demo。这个自定义指令还需要大家自行完善。

demo可见Github:vue-form-param-check

首先关于自定义指令的介绍可以参考官网

首先,在github上已经有了一些开源组件可以支持表单校验。但是对于一些小项目而言,引入一个很大的东西实际上并不好。所以这里利用vue的自定义指令对表单校验进行了简单的实现。

分析

在平时我们所见的表单中,常见的做法有2种:

- input框输入时和提交时,立马进行校验;

- 提交时,统一校验。

针对这2种实现,笔者分别进行了实现。分别如下。

input框输入和提交时,进行校验

import Vue from 'vue'

const IP_REGEX = '^(1\\d{2}|2[0-4]\\d|25[0-5]|[1-9]\\d|[1-9])\\.' +
'(1\\d{2}|2[0-4]\\d|25[0-5]|[1-9]\\d|\\d)\\.' +
'(1\\d{2}|2[0-4]\\d|25[0-5]|[1-9]\\d|\\d)\\.' +
'(1\\d{2}|2[0-4]\\d|25[0-5]|[1-9]\\d|\\d)$'

// 注册一个全局自定义指令 `v-checkParam`
Vue.directive('checkParam', {
 // 当被绑定的元素插入到 DOM 中时……
 inserted: function (el, binding, vNode) {
  el.addEventListener('keyup', function (event) {
   // 首先去除已有样式
   el.className = el.className.replace('input-error', '').trim()
   // if (!event.keyCode) { // 加上这个判断就是在提交时,才会校验
    // 判断是否是否必填
   let isRequired = binding.value.required
   if (isRequired) {
    if (!el.value || el.value === '') {
     el.className += ' input-error'
    }
   }

    // 判断正则
    // debugger
   let regex = binding.value.regex
   if (regex === 'IpRegex') {
    if (!el.value.match(IP_REGEX)) {
     el.className += ' input-error'
    }
   } else if (!el.value.match(regex)) {
    el.className += ' input-error'
   }
   // }
  })
 }
})

// 注册一个全局自定义指令 `v-checkSubmit`
Vue.directive('checkSubmit', {
 // 当被绑定的元素插入到 DOM 中时……
 inserted: function (el, binding, vNode) {
  el.addEventListener('click', function (event) {
   let elements = document.getElementsByClassName('v-check')
   var evObj = document.createEvent('Event')
   evObj.initEvent('keyup', true, true)
   for (let element of elements) {
    element.dispatchEvent(evObj)
   }
   let errorInputs = document.getElementsByClassName('input-error');
   if(errorInputs.length === 0){
    vNode.context.submit();
   }
  })
 }
})

提交时,再统一校验

import Vue from 'vue'

const IP_REGEX = '^(1\\d{2}|2[0-4]\\d|25[0-5]|[1-9]\\d|[1-9])\\.' +
'(1\\d{2}|2[0-4]\\d|25[0-5]|[1-9]\\d|\\d)\\.' +
'(1\\d{2}|2[0-4]\\d|25[0-5]|[1-9]\\d|\\d)\\.' +
'(1\\d{2}|2[0-4]\\d|25[0-5]|[1-9]\\d|\\d)$'

// 注册一个全局自定义指令 `v-checkParam`
Vue.directive('checkParam', {
 // 当被绑定的元素插入到 DOM 中时……
 inserted: function (el, binding, vNode) {
  el.addEventListener('keyup', function (event) {
   // 首先去除已有样式
   el.className = el.className.replace('input-error', '').trim()
   if (!event.keyCode) { // 加上这个判断就是在提交时,才会校验
    // 判断是否是否必填
    let isRequired = binding.value.required
    if (isRequired) {
     if (!el.value || el.value === '') {
      el.className += ' input-error'
     }
    }

    // 判断正则
    let regex = binding.value.regex
    if (regex === 'IpRegex') {
     if (!el.value.match(IP_REGEX)) {
      el.className += ' input-error'
     }
    }
    else if (!el.value.match(regex)) {
     el.className += ' input-error'
    }
   }
  })
 }
})

// 注册一个全局自定义指令 `v-checkSubmit`
Vue.directive('checkSubmit', {
 // 当被绑定的元素插入到 DOM 中时……
 inserted: function (el, binding, vNode) {
  el.addEventListener('click', function (event) {
   let elements = document.getElementsByClassName('v-check')
   var evObj = document.createEvent('Event')
   evObj.initEvent('keyup', true, true)
   for (let element of elements) {
    element.dispatchEvent(evObj)
   }
   let errorInputs = document.getElementsByClassName('input-error');
   if(errorInputs.length === 0){
    vNode.context.submit();
   }
  })
 }
})

区别

其实大家很容易发现,上面的2种实现只有一个if的区别,这个的含义是:由提交按钮触发的keyup,是没有keycode的,所以在if(!event.keyCode)满足时,进行校验(也就是在仅提交时,进行校验)。

用法说明

下面给出用例。

<template>
 <div>
  <div>
  <label class="star">Name:</label>
   <input class='v-check' v-checkParam="{required:true,regex:'^[abcde]*$'}" type="text">
  </div>
  <div>
  <label class="star">IP:</label>
   <input class='v-check' v-checkParam="{required:true,regex:'IpRegex'}"
   type="text">
   </div>
  <div>
   <button v-checkSubmit>提交</button>
  </div>
 </div>
</template>
<script>
export default {
 name: 'demo',
 methods: {
  submit () {
   alert('通过校验')
  }
 }
}
</script>

<style scoped>
input{
  height: 22px;
}
.input-error{
 background-color: red;
}
.star:before
{
 content:"*";
 color:red;
}
</style>

所有绑定了class=”v-check”的input,都会在v-checkSubmit被click时进行校验,而其校验规则是v-checkParam对应的规则。

全部校验通过后,会回调到submit方法。进行触发接下来的事务。

效果截图

vue 使用自定义指令实现表单校验的方法

vue 使用自定义指令实现表单校验的方法

以上这篇vue 使用自定义指令实现表单校验的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 调整select 位置的函数
Feb 21 Javascript
JavaScript入门教程(8) Location地址对象
Jan 31 Javascript
jQuery find和children方法使用
Jan 31 Javascript
html文档中的location对象属性理解及常见的用法
Aug 13 Javascript
js获取及判断键盘按键的方法
Dec 01 Javascript
D3.js实现柱状图的方法详解
Sep 21 Javascript
JS自定义函数对web前端上传的文件进行类型大小判断
Oct 19 Javascript
用jQuery实现可输入多选下拉组合框实例代码
Jan 18 Javascript
JS库之ParticlesJS使用简介
Sep 12 Javascript
详解webpack模块化管理和打包工具
Apr 21 Javascript
安装vue-cli的简易过程
May 22 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
Apr 14 Javascript
微信小程序多音频播放进度条问题
Aug 28 #Javascript
微信小程序获取音频时长与实时获取播放进度问题
Aug 28 #Javascript
vue表单自定义校验规则介绍
Aug 28 #Javascript
vue+axios+mock.js环境搭建的方法步骤
Aug 28 #Javascript
Vue实现用户自定义字段显示数据的方法
Aug 28 #Javascript
浅谈VUE单页应用首屏加载速度优化方案
Aug 28 #Javascript
浅谈redux以及react-redux简单实现
Aug 28 #Javascript
You might like
php面向对象全攻略 (八)重载新的方法
2009/09/30 PHP
php的日期处理函数及uchome的function_coomon中日期处理函数的研究
2011/01/12 PHP
PHP实现的登录,注册及密码修改功能分析
2016/11/25 PHP
PHP静态延迟绑定和普通静态效率的对比
2017/10/20 PHP
PHP中strtr与str_replace函数运行性能简单测试示例
2019/06/22 PHP
js 单引号 传递方法
2009/06/22 Javascript
js getElementsByTagName的简写方式
2010/06/27 Javascript
关于jquery性能最佳实践的讨论,与求教
2012/03/30 Javascript
jQuery在html有效在jsp无效的原因及解决方法
2013/08/02 Javascript
JS预览图像将本地图片显示到浏览器上
2013/08/25 Javascript
jquery选择器需要注意的问题
2014/11/26 Javascript
node.js中的fs.fsync方法使用说明
2014/12/15 Javascript
jQuery经过一段时间自动隐藏指定元素的方法
2015/03/17 Javascript
关于JavaScript作用域你想知道的一切
2016/02/04 Javascript
JS获取IMG图片高宽的简单实例
2016/05/17 Javascript
浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()
2016/12/22 Javascript
[原创]jQuery实现合并/追加数组并去除重复项的方法
2018/04/11 jQuery
JS数组去重常用方法实例小结【4种方法】
2018/05/28 Javascript
微信小程序利用Canvas绘制图片和竖排文字详解
2019/06/25 Javascript
微信小程序 下拉刷新及上拉加载原理解析
2019/11/06 Javascript
vue学习笔记之过滤器的基本使用方法实例分析
2020/02/01 Javascript
javascript 内存模型实例详解
2020/04/18 Javascript
[01:13]2014DOTA2西雅图邀请赛 舌尖上的TI4
2014/07/08 DOTA
Python实现批量读取word中表格信息的方法
2015/07/30 Python
pyqt5移动鼠标显示坐标的方法
2019/06/21 Python
Django使用模板后无法找到静态资源文件问题解决
2019/07/19 Python
Python+OpenCv制作证件图片生成器的操作方法
2019/08/21 Python
Data URI scheme详解和使用实例及图片base64编码实现方法
2014/05/08 HTML / CSS
英国口碑最好的的维他命胶囊品牌:Myvitamins(有中文站)
2016/12/03 全球购物
卫校毕业生自我鉴定
2013/10/31 职场文书
2015年煤矿安全工作总结
2015/05/23 职场文书
成绩单家长意见
2015/06/03 职场文书
2015暑假实习报告范文
2015/07/13 职场文书
推广普通话宣传标语口号
2015/12/26 职场文书
2016年119消防宣传日活动总结
2016/04/05 职场文书
Python异常类型以及处理方法汇总
2021/06/05 Python