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 学习之旅 (3)
Feb 05 Javascript
window.print打印指定div实例代码
Dec 13 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
Sep 01 Javascript
使用jquery.validate自定义方法实现&quot;手机号码或者固话至少填写一个&quot;的逻辑验证
Sep 01 Javascript
Jquery实现顶部弹出框特效
Aug 08 Javascript
jQuery实现模仿微博下拉滚动条加载数据效果
Dec 25 Javascript
JS版微信6.0分享接口用法分析
Oct 13 Javascript
jquery组件WebUploader文件上传用法详解
Oct 23 Javascript
react在安卓中输入框被手机键盘遮挡问题的解决方法
Sep 03 Javascript
vue 重塑数组之修改数组指定index的值操作
Aug 09 Javascript
vue集成openlayers加载geojson并实现点击弹窗教程
Sep 24 Javascript
使用JS实现简易计算器
Jun 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数学运算
2011/12/30 PHP
php 判断数组是几维数组
2013/03/20 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十四)
2014/06/26 PHP
PHP QRCODE生成彩色二维码的方法
2016/05/19 PHP
Yii数据读取与跳转参数传递用法实例分析
2016/07/12 PHP
PHP文件与目录操作示例
2016/12/24 PHP
Mootools 1.2教程 定时器和哈希简介
2009/09/15 Javascript
JQuery入门——事件切换之hover()方法应用介绍
2013/02/05 Javascript
Json和Jsonp理论实例代码详解
2013/11/15 Javascript
javascript实现客户端兼容各浏览器创建csv并下载的方法
2015/03/23 Javascript
js判断当前页面用什么浏览器打开的方法
2016/01/06 Javascript
微信小程序 require机制详解及实例代码
2016/12/14 Javascript
深入理解Javascript中的观察者模式
2017/02/20 Javascript
jQuery快速高效制作网页交互特效
2017/02/24 Javascript
微信小程序中使用ECharts 异步加载数据实现图表功能
2018/07/13 Javascript
跟混乱的页面弹窗说再见
2019/04/11 Javascript
Vue使用lodop实现打印小结
2019/07/06 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
2019/09/03 Javascript
JS使用H5实现图片预览功能
2019/09/30 Javascript
使用python3实现操作串口详解
2019/01/01 Python
关于Python 中的时间处理包datetime和arrow的方法详解
2020/03/19 Python
pycharm的python_stubs问题
2020/04/08 Python
浅谈OpenCV中的新函数connectedComponentsWithStats用法
2020/07/05 Python
CSS3 中filter(滤镜)属性使用详解
2020/04/07 HTML / CSS
为中国消费者甄选天下优品:网易严选
2016/08/11 全球购物
整个世界的设计师家具在哈恩:Designathome
2019/03/25 全球购物
eDreams加拿大:廉价航班、酒店和度假
2019/03/29 全球购物
Bibloo匈牙利:女装、男装、童装及鞋子和配饰
2019/04/14 全球购物
aden + anais英国官网:美国婴儿贴身用品品牌
2019/09/08 全球购物
AOP的定义以及作用
2013/09/08 面试题
介绍一下OSI七层模型
2012/07/03 面试题
篝火晚会主持词
2014/03/25 职场文书
《理想的风筝》教学反思
2014/04/11 职场文书
2014年向国旗敬礼活动总结
2014/09/27 职场文书
公司领导班子对照检查存在问题整改措施
2014/10/02 职场文书
检察院起诉意见书
2015/05/20 职场文书