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 相关文章推荐
JQuery 国际象棋棋盘 实现代码
Jun 26 Javascript
jQuery的选择器中的通配符使用介绍
Mar 20 Javascript
基于jquery实现可定制的web在线富文本编辑器附源码下载
Nov 17 Javascript
一道关于JavaScript变量作用域的面试题
Mar 08 Javascript
jQuery实现图片轮播效果代码
Sep 27 Javascript
jquery实现全选、全不选以及单选功能
Mar 23 jQuery
详解tween.js 中文使用指南
Jan 05 Javascript
Angular父组件调用子组件的方法
Apr 02 Javascript
security.js实现的RSA加密功能示例
Jun 06 Javascript
webpack4 optimization使用总结
Nov 10 Javascript
微信小程序实现加入购物车滑动轨迹
Nov 18 Javascript
JavaScript实现切换多张图片
Jan 27 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多重接口的实现方法
2015/06/20 PHP
最新版本PHP 7 vs HHVM 多角度比较
2016/02/14 PHP
Zend Framework框架路由机制代码分析
2016/03/22 PHP
阿里云的WindowsServer2016上部署php+apache
2018/07/17 PHP
PHP 多进程与信号中断实现多任务常驻内存管理实例方法
2019/10/04 PHP
浅谈laravel5.5 belongsToMany自身的正确用法
2019/10/17 PHP
js之WEB开发调试利器:Firebug 下载
2007/01/13 Javascript
List the Codec Files on a Computer
2007/06/11 Javascript
jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
2008/12/25 Javascript
js实现简单的星级选择器提交效果适用于评论等
2013/10/18 Javascript
jquery中 $.expr使用实例介绍
2014/06/09 Javascript
jQuery的each循环用法简单示例
2016/06/12 Javascript
JS如何判断json是否为空
2016/07/06 Javascript
很实用的js选项卡切换效果
2016/08/12 Javascript
Vue.js每天必学之内部响应式原理探究
2016/09/07 Javascript
Vue组件实例间的直接访问实现代码
2017/08/20 Javascript
webpack学习教程之前端性能优化总结
2017/12/05 Javascript
探索JavaScript中私有成员的相关知识
2019/06/13 Javascript
JavaScript剩余操作符Rest Operator详解
2019/07/20 Javascript
小程序表单认证布局及验证详解
2020/06/19 Javascript
nuxt 实现在其它js文件中使用store的方式
2020/11/05 Javascript
Python基础教程之正则表达式基本语法以及re模块
2016/03/25 Python
解决python matplotlib imshow无法显示的问题
2018/05/24 Python
Flask核心机制之上下文源码剖析
2018/12/25 Python
Windows平台Python编程必会模块之pywin32介绍
2019/10/01 Python
如何解决flask修改静态资源后缓存文件不能及时更改问题
2020/08/02 Python
惠普墨西哥官方商店:HP墨西哥
2016/12/01 全球购物
日本订房网站,预订日本星级酒店/温泉旅馆:Relux(支持中文)
2020/01/03 全球购物
广告学毕业生求职信
2014/01/30 职场文书
自考毕业自我鉴定
2014/03/18 职场文书
学生保证书范文
2014/04/28 职场文书
新农村建设典型材料
2014/05/31 职场文书
商场圣诞节活动总结
2015/05/06 职场文书
Nest.js参数校验和自定义返回数据格式详解
2021/03/29 Javascript
HTML+CSS制作心跳特效的实现
2021/05/26 HTML / CSS
Python字典和列表性能之间的比较
2021/06/07 Python