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 相关文章推荐
JavaScript中实现块作用域的方法
Apr 01 Javascript
jQuery EasyUI API 中文文档 - Tree树使用介绍
Nov 19 Javascript
js过滤HTML标签以及空格的思路及代码
May 24 Javascript
js实现俄罗斯方块小游戏分享
Jan 31 Javascript
jQuery动画出现连续触发、滞后反复执行的解决方法
Jan 28 Javascript
Node.js返回JSONP详解
May 18 Javascript
实现React单页应用的方法详解
Aug 02 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
Nov 08 Javascript
浅析vue 函数配置项watch及函数 $watch 源码分享
Nov 22 Javascript
layui 数据表格 点击分页按钮 监听事件的实例
Sep 02 Javascript
JS回调函数简单易懂的入门实例分析
Sep 29 Javascript
vue和iview实现Scroll 数据无限滚动功能
Oct 31 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文件锁定写入实例解析
2014/07/14 PHP
PHP中构造函数和析构函数解析
2014/10/10 PHP
php中JSON的使用方法
2015/04/30 PHP
PHP的命令行命令使用指南
2015/08/18 PHP
php验证码生成器
2017/05/24 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
在phpstudy集成环境下的nginx服务器下配置url重写
2019/12/02 PHP
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/01/13 Javascript
js控制input框只读实现示例
2014/01/20 Javascript
js操作模态窗口及父子窗口间相互传值示例
2014/06/09 Javascript
JavaScript实现数组在指定位置插入若干元素的方法
2015/04/06 Javascript
JS实现alert中显示换行的方法
2015/12/17 Javascript
Vue.js每天必学之过滤器与自定义过滤器
2016/09/07 Javascript
three.js搭建室内场景教程
2018/12/30 Javascript
js中的reduce()函数讲解
2019/01/18 Javascript
layer更改皮肤的实现方法
2019/09/11 Javascript
layui 弹出层值回传解决方式
2019/11/14 Javascript
js实现录音上传功能
2019/11/22 Javascript
微信小程序实现时间戳格式转换
2020/07/20 Javascript
[02:41]《西雅图我们来了》2015国际邀请赛出征全记录
2015/07/23 DOTA
python在控制台输出进度条的方法
2015/06/20 Python
python 排序算法总结及实例详解
2016/09/28 Python
python中的迭代和可迭代对象代码示例
2017/12/27 Python
Python使用matplotlib实现基础绘图功能示例
2018/07/03 Python
Numpy中的mask的使用
2018/07/21 Python
python爬虫租房信息在地图上显示的方法
2019/05/13 Python
Python实现常见的几种加密算法(MD5,SHA-1,HMAC,DES/AES,RSA和ECC)
2020/05/09 Python
django 数据库返回queryset实现封装为字典
2020/05/19 Python
详解Pytorch显存动态分配规律探索
2020/11/17 Python
Python3+Django get/post请求实现教程详解
2021/02/16 Python
Hotels.com加拿大:领先的在线住宿网站
2018/10/05 全球购物
金融专业个人求职信范文
2013/11/28 职场文书
工厂门卫岗位职责
2015/04/13 职场文书
导师鉴定意见
2015/06/05 职场文书
老舍《猫》教学反思
2016/02/17 职场文书
【HBU】数据库第四周 单表查询
2021/04/05 SQL Server