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 相关文章推荐
Tips 带三角可关闭的文字提示
Oct 06 Javascript
js call方法详细介绍(js 的继承)
Nov 18 Javascript
原生js和jquery实现图片轮播特效
Apr 23 Javascript
javascript中eval函数用法分析
Apr 25 Javascript
JavaScript检测字符串中是否含有html标签实现方法
Jul 01 Javascript
跟我学习JScript的Bug与内存管理
Nov 18 Javascript
基于jquery实现智能表单验证操作
May 09 Javascript
Jquery实现跨域异步上传文件总结
Feb 03 Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
Jul 10 Javascript
Element-UI踩坑之Pagination组件的使用
Oct 29 Javascript
Vue-Cli 3.0 中配置高德地图的两种方式
Jun 19 Javascript
javascript简单实现深浅拷贝过程详解
Oct 08 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
整理的9个实用的PHP库简介和下载
2010/11/09 PHP
Yii2框架BootStrap样式的深入理解
2016/11/07 PHP
YII2框架使用控制台命令的方法分析
2020/03/18 PHP
JQUERY 浏览器判断实现函数
2009/08/20 Javascript
js/jquery获取文本框输入焦点的方法
2014/03/04 Javascript
javascript移出节点removeChild()使用介绍
2014/04/03 Javascript
JavaScript中的ubound函数使用实例
2014/11/04 Javascript
仿JQuery输写高效JSLite代码的一些技巧
2015/01/13 Javascript
Jquery使用css方法改变样式实例
2015/05/18 Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
2015/12/18 Javascript
jQuery将表单序列化成一个Object对象的实例
2016/11/29 Javascript
AngularJS中table表格基本操作示例
2017/10/10 Javascript
Angular之toDoList的实现代码示例
2017/12/02 Javascript
前端开发之便利店收银系统代码
2019/12/27 Javascript
JavaScript单线程和任务队列原理解析
2020/02/04 Javascript
JavaScript接口实现方法实例分析
2020/05/16 Javascript
NodeJS多种创建WebSocket监听的方式(三种)
2020/06/04 NodeJs
[42:23]完美世界DOTA2联赛PWL S3 Forest vs Rebirth 第二场 12.10
2020/12/13 DOTA
在Python中使用matplotlib模块绘制数据图的示例
2015/05/04 Python
python超简单解决约瑟夫环问题
2015/05/12 Python
django实现用户登陆功能详解
2017/12/11 Python
python抓取网站的图片并下载到本地的方法
2018/05/22 Python
Python全局变量与局部变量区别及用法分析
2018/09/03 Python
Django中Middleware中的函数详解
2019/07/18 Python
Python坐标线性插值应用实现
2019/11/13 Python
Rosetta Stone官方网站:语言学习
2019/01/05 全球购物
Perfume’s Club德国官网:在线购买香水
2019/04/08 全球购物
面向中国市场的在线海淘美妆零售网站:Beauty House美丽屋
2021/03/02 全球购物
兼职学生的自我评价
2013/11/24 职场文书
2014年教师节寄语
2014/04/03 职场文书
监察局领导班子四风问题整改措施思想汇报
2014/10/05 职场文书
2014年网络管理员工作总结
2014/12/01 职场文书
金陵十三钗观后感
2015/06/04 职场文书
导游词之宿迁乾隆行宫
2019/10/15 职场文书
浅谈Python 中的复数问题
2021/05/19 Python
Java中的Kafka为什么性能这么快及4大核心详析
2022/09/23 Java/Android