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 相关文章推荐
又一个小巧的图片预加载类
May 05 Javascript
IE图片缓存document.execCommand(&quot;BackgroundImageCache&quot;,false,true)
Mar 01 Javascript
checkbox全选所涉及到的知识点介绍
Dec 31 Javascript
JavaScript实现的链表数据结构实例
Apr 02 Javascript
Javascript计算二维数组重复值示例代码
Dec 18 Javascript
JS实现JSON.stringify的实例代码讲解
Feb 07 Javascript
纯js实现html转pdf的简单实例(推荐)
Feb 16 Javascript
JS实现左边列表移到到右边列表功能
Mar 28 Javascript
es6数据变更同步到视图层的方法
Mar 04 Javascript
原生js拖拽实现图形伸缩效果
Feb 10 Javascript
ant design vue 表格table 默认勾选几项的操作
Oct 31 Javascript
JavaScript/TypeScript 实现并发请求控制的示例代码
Jan 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
合作指挥官:孟斯克
2020/03/16 星际争霸
收音机的保养
2021/03/01 无线电
PHP学习之PHP表达式
2006/10/09 PHP
php SQL防注入代码集合
2008/04/25 PHP
PHP学习之输出字符串(echo,print,printf,print_r和var_dump)
2011/04/17 PHP
关于PHP语言构造器介绍
2013/07/08 PHP
PHP设计模式之简单投诉页面实例
2016/02/24 PHP
jquerymobile checkbox及时刷新才能获取其准确值
2012/04/14 Javascript
11个用于提高排版水平的基于jquery的文字效果插件
2012/09/14 Javascript
window.opener用法和用途实例介绍
2013/08/19 Javascript
JavaScript的Vue.js库入门学习教程
2016/05/23 Javascript
微信小程序开发实战教程之手势解锁
2016/11/18 Javascript
Node.js用readline模块实现输入输出
2016/12/16 Javascript
简单实现js菜单栏切换效果
2017/03/04 Javascript
强大的 Angular 表单验证功能详细介绍
2017/05/23 Javascript
详解angularjs中的隔离作用域理解以及绑定策略
2017/05/31 Javascript
vue构建动态表单的方法示例
2018/09/22 Javascript
Vue实现小购物车功能
2020/12/21 Vue.js
Vite和Vue CLI的优劣
2021/01/30 Vue.js
[00:12]DAC SOLO赛卫冕冠军 VG.Paparazi灬展现SOLO技巧
2018/04/06 DOTA
python学习之第三方包安装方法(两种方法)
2015/07/30 Python
Python语言描述机器学习之Logistic回归算法
2017/12/21 Python
python-itchat 获取微信群用户信息的实例
2019/02/21 Python
Tensorflow 多线程设置方式
2020/02/06 Python
python中的yield from语法快速学习
2020/11/06 Python
adidas菲律宾官网:adidas PH
2020/02/07 全球购物
医院护士专业个人的求职信
2013/12/09 职场文书
公司财务总监岗位职责
2013/12/14 职场文书
商场经理竞聘演讲稿
2014/01/01 职场文书
党员公开承诺书和承诺事项
2014/03/25 职场文书
小学师德标兵先进事迹材料
2014/05/25 职场文书
教师个人事迹材料
2014/12/17 职场文书
普宁寺导游词
2015/02/04 职场文书
《火烧云》教学反思
2016/02/23 职场文书
2017元旦晚会开幕词
2016/03/03 职场文书
Spring mvc是如何实现与数据库的前后端的连接操作的?
2021/06/30 Java/Android