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优化技巧(文件瘦身篇)
Jan 28 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
Sep 03 Javascript
利用JQuery的load函数动态加载其它页面的内容的实现代码
Dec 14 Javascript
基于jquery循环map功能的代码
Feb 26 Javascript
jQuery设置div一直在页面顶部显示的方法
Oct 24 Javascript
调用DOM对象的focus使文本框获得焦点
Feb 19 Javascript
javascript判断变量是否有值的方法
Apr 20 Javascript
jQuery插件Echarts实现的渐变色柱状图
Mar 23 jQuery
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
Dec 19 Javascript
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
js中arguments对象的深入理解
May 14 Javascript
原生JavaScript实现拖动校验功能
Sep 29 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 一个比较完善的简单文件上传
2010/03/25 PHP
php删除字符串末尾子字符,删除开始字符,删除两端字符(实现代码)
2013/06/27 PHP
php设计模式之组合模式实例详解【星际争霸游戏案例】
2020/03/27 PHP
ExtJS 2.0实用简明教程 之Border区域布局
2009/04/29 Javascript
通过JavaScript控制字体大小的代码
2011/10/04 Javascript
jQuery下通过replace字符串替换实现大小图片切换
2012/05/22 Javascript
JS弹出层单纯的绝对定位居中示例代码
2014/02/18 Javascript
js中for in语句的用法讲解
2015/04/24 Javascript
JavaScript中innerHTML,innerText,outerHTML的用法及区别
2015/09/01 Javascript
基于javascript html5实现多文件上传
2016/03/03 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
2016/08/04 Javascript
DropDownList控件绑定数据源的三种方法
2016/12/24 Javascript
深入理解NodeJS 多进程和集群
2018/10/17 NodeJs
vue拖拽排序插件vuedraggable使用方法详解
2020/08/21 Javascript
Javascript三种字符串连接方式及性能比较
2019/05/28 Javascript
Vue中component标签解决项目组件化操作
2020/09/04 Javascript
比较详细Python正则表达式操作指南(re使用)
2008/09/06 Python
Python3.5文件读与写操作经典实例详解
2019/05/01 Python
python使用百度文字识别功能方法详解
2019/07/23 Python
如何基于python实现画不同品种的樱花树
2020/01/03 Python
Python更新所有已安装包的操作
2020/02/13 Python
python判断两个序列的成员是否一样的实例代码
2020/03/01 Python
pytorch判断是否cuda 判断变量类型方式
2020/06/23 Python
python如何获得list或numpy数组中最大元素对应的索引
2020/11/16 Python
手把手教你配置JupyterLab 环境的实现
2021/02/02 Python
中国最大的团购网站:聚划算
2016/09/21 全球购物
外贸公司实习自我鉴定
2013/09/24 职场文书
自主招生自荐信范文
2013/12/04 职场文书
工作失职检讨书范文
2014/01/16 职场文书
函授大学生自我鉴定
2014/02/05 职场文书
大学教师师德师风演讲稿
2014/08/22 职场文书
团队拓展活动方案
2014/08/28 职场文书
2014年妇委会工作总结
2014/12/10 职场文书
新课程改革心得体会
2016/01/22 职场文书
《风不能把阳光打败》读后感3篇
2020/01/06 职场文书
PHP正则表达式之RCEService回溯
2022/04/11 PHP