vue自定义指令限制输入框输入值的步骤与完整代码


Posted in Javascript onAugust 30, 2020

需求

前端开发过程中,经常遇到表单校验的需求,比如校验用户输入框的内容,限制用户只能输入数字。

本文内容基于 element-ui,el-form 组件可以绑定 model、rule 用于表单内容校验,但如果有多个表单多个输入框那就得写很多个 rule,虽然方法可以通用可是使用起来也是比较繁琐的,可通过自定义执行实现一次注册,多次使用。

Vue 自定义指令

我们使用 el-input 作为表单的输入框

1. 先注册一个自定义指令

import Vue from 'vue';

Vue.directive('LimitInputNumber', {
 bind(el) {
 # do something
 },
});

2.使用自定义指令

直接在组件内绑定 v-limit-input-number 指令

<el-input v-limit-input-number />

3.指令内部校验

onkeypress 事件

onkeypress 事件会在键盘按键被按下并释放一个键时发生

可在事件触发时检测若输入的值不为数字,直接返回 fales

Vue.directive('LimitInputNumber', {
 bind(el) {
 el.onkeypress = (event) => {
  return (/[\d]/.test(String.fromCharCode(event.keyCode || event.which))) || event.which === 8;
 };
 },
});

但该事件存在一个问题,就是在中文输入法的时候无法触发事件,导致用户可以输入中文

vue自定义指令限制输入框输入值的步骤与完整代码

oninput 事件

oninput 事件在用户输入时触发

可在事件触发时进行过滤,过滤掉那些不为数字的值,并重新绑定到输入框上,解决了中文输入法下的问题

Vue.directive('LimitInputNumber', {
 bind(el) {
  el.oninput = () => {
   el.children[0].value = el.children[0].value.replace(/\D/ig, '');
  };
 },
});

vue自定义指令限制输入框输入值的步骤与完整代码

完整代码

import Vue from 'vue';

Vue.directive('LimitInputNumber', {
 bind(el) {
  el.onkeypress = (event) => {
   return (/[\d]/.test(String.fromCharCode(event.keyCode || event.which))) || event.which === 8;
  };
  el.oninput = () => {
   el.children[0].value = el.children[0].value.replace(/\D/ig, '');
  };
 },
});

总结

到此这篇关于vue自定义指令限制输入框输入值的文章就介绍到这了,更多相关vue自定义指令限制输入框输入值内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jquery按回车提交数据的代码示例
Nov 05 Javascript
JavaScript实现常用二级省市级联下拉列表的方法
Mar 25 Javascript
基于jQuery实现音乐播放试听列表
Apr 14 Javascript
Vue.JS入门教程之事件监听
Dec 01 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
Mar 09 Javascript
如何使用Bootstrap创建表单
Mar 29 Javascript
react.js CMS 删除功能的实现方法
Apr 17 Javascript
jQuery中库的引用方法
Jan 06 jQuery
ES7之Async/await的使用详解
Mar 28 Javascript
详解Vue源码中一些util函数
Apr 24 Javascript
vue项目在线上服务器访问失败原因分析
Aug 14 Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
Aug 18 Javascript
JS性能优化实现方法及优点进行
Aug 30 #Javascript
如何检测JavaScript中的死循环示例详解
Aug 30 #Javascript
JavaScript中CreateTextFile函数
Aug 30 #Javascript
详解vue组件之间的通信
Aug 30 #Javascript
如何阻止移动端浏览器点击图片浏览
Aug 29 #Javascript
JavaScript事件委托实现原理及优点进行
Aug 29 #Javascript
JS如何判断对象是否包含某个属性
Aug 29 #Javascript
You might like
实用PHP会员权限控制实现原理分析
2011/05/29 PHP
php初始化对象和析构函数的简单实例
2014/03/11 PHP
深入理解Javascript闭包 新手版
2010/12/28 Javascript
脚本合并提升javascript性能示例
2014/02/24 Javascript
jquery处理json数据实例分析
2014/06/03 Javascript
JavaScript返回网页中锚点数目的方法
2015/04/03 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
2016/01/12 Javascript
js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解
2016/04/01 Javascript
Bootstrap CSS组件之导航(nav)
2016/12/17 Javascript
Angular.JS实现无限级的联动菜单(使用demo)
2017/02/08 Javascript
用jQuery实现圆点图片轮播效果
2017/03/19 Javascript
详解node nvm进行node多版本管理
2017/10/21 Javascript
JS+WCF实现进度条实时监测数据加载量的方法详解
2017/12/19 Javascript
vue axios数据请求get、post方法及实例详解
2018/09/11 Javascript
使用vue开发移动端管理后台的注意事项
2019/03/07 Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
2019/04/30 Javascript
bootstrap-table formatter 使用vue组件的方法
2019/05/09 Javascript
[42:25]EG vs Spirit Supermajor 败者组 BO3 第二场 6.4
2018/06/05 DOTA
[48:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第二场 1月29日
2021/03/11 DOTA
在Python的列表中利用remove()方法删除元素的教程
2015/05/21 Python
Python编程中字符串和列表的基本知识讲解
2015/10/14 Python
Python函数中*args和**kwargs来传递变长参数的用法
2016/01/26 Python
python判断字符串编码的简单实现方法(使用chardet)
2016/07/01 Python
Numpy中stack(),hstack(),vstack()函数用法介绍及实例
2018/01/09 Python
python3+pyqt5+itchat微信定时发送消息的方法
2019/02/20 Python
python如何进入交互模式
2020/07/06 Python
python从Oracle读取数据生成图表
2020/10/14 Python
英国领先的名牌服装折扣零售商:Brown Bag Clothing
2019/01/08 全球购物
.net软件工程师面试题
2015/03/31 面试题
如何写自我鉴定
2014/03/19 职场文书
2014年酒店服务员工作总结
2014/12/08 职场文书
劳模事迹材料范文
2014/12/24 职场文书
公司股份转让协议书范本
2015/01/28 职场文书
婚礼父母致辞
2015/07/28 职场文书
中学图书馆工作总结
2015/08/11 职场文书
运动会口号霸气押韵
2015/12/24 职场文书