Vue ElementUI实现:限制输入框只能输入正整数的问题


Posted in Javascript onJuly 31, 2020

input输入框中禁止输入小数和负数(*只允许输入正整数 *)

最近在做项目中碰见了这么个问题,需要输入数字,但是只能输入正整数,在网上找的没找到自己想要的,所以就自己想了两个办法,在这里跟大家分享一下。(因为是刚毕业,第一次写博客,所以有点生疏,请各位大佬担待一些)

方法一:利用禁止按键的方法,主要是依靠禁止按下减号以及小数点来完成的

Vue ElementUI实现:限制输入框只能输入正整数的问题

首先要监听keyup(键盘按下)事件,因为elementUi上面的input组件监听事件是没有这个事件的,所以可能会报错,所以我们需要加个vue事件的修饰符 .native,代表原生事件的意思。

然后我们传个$event对象进去来获取原生的DOM(可以简单理解为触发事件的本身)

接下来就是在methods中写这个函数了

Vue ElementUI实现:限制输入框只能输入正整数的问题

具体的意思我已经写在上面了,按下键后,可以自己弹出一下keynum和keychar所代表的的字符或者键盘码,根据哪个判断都可以,我选择使用键盘码来判断进入判断后我们就可以做交互了,最后我选择清掉用户所输入的数据。

方法二:利用正则表达式来规避掉小数点和负数

Vue ElementUI实现:限制输入框只能输入正整数的问题

在这里呢使用的就是elementUI的事件了,我们监听一下失去焦点的时候要触发事件,同样的我们要传入进去$event参数

methods中编写函数

Vue ElementUI实现:限制输入框只能输入正整数的问题

这里使用的正则的意思代表的是(针对没有接触过正则的同学,会的大佬们看看有什么错误没):

首先我们先看开头的^和结尾的$这里分别代表匹配字符串的开头以及匹配字符串的结尾,而[1-9]是代表的是匹配1-9其中的数字,所以会过滤掉负数和小数,同时要求开头必须要以1开头,后面的则是匹配以0-9结尾的数字,而*代表的是0次或多次,也就是不限制结尾的数字,合起来的意思就是:我们匹配从1-9中的某个数开头,并且以0-9中的某个数结尾的匹配。

最后呢,就是做的判断了,如果符合我们所定义的正则就不用提示错误了,如果不符合呢,就会提示错误,同时清空数据

下面这些内容是后追加的:

方法三:利用ES6语法includes来规筛掉 . 和 -

1.获取到输入框的值,对输入框内容进行检索

var inputText = document.querySelector('#inputText')

 inputText.addEventListener('input', function(){
  if( this.value.includes('.')){
   console.log('不能输入小数点')
  }else if(this.value.includes('-')){
   console.log('不能输入负数')
  }else{
   console.log('正常')
  }
 })

方法四:利用正则匹配出 . 或者 -

方法是和方法二一样的,但是正则表达式则是:/^\d+\.\d$/

附上两个实例:

let regx = /^\d+\.\d+$/;
let num_two = 1.252;
const newNum_two = regx.test(num_two)
console.log(newNum_two)

解释:

/^d+:以任意一个数字开头 +:出现一次或多次

\.:第二位为小数点

\d+$ :以任意一个数字结尾并且出现一次或多次

let regx_two = /^\-\d\.?\d*$/;
let num_three = -2.53;
const newNum_three = regx_two.test(num_three)
console.log(newNum_three)

解释:

/^\-:以 - 号 开头

\d:第二位肯定是个数字

\.:第三位可能会出现0次或者1次的 .

\d* 以数字 结尾出现0次或多次(这样就可以如果输入的单单是-2的话,也能匹配到)

OK分享到此结束,如果我之后还有什么办法,再来分享给大家,希望能给大家一个参考,也希望大家多多支持三水点靠木!

Javascript 相关文章推荐
javascript 特性检测并非浏览器检测
Jan 15 Javascript
jQuery动态添加 input type=file的实现代码
Jun 14 Javascript
javascript作用域容易记错的两个地方分析
Jun 22 Javascript
JavaScript高级程序设计(第3版)学习笔记7 js函数(上)
Oct 11 Javascript
借助script进行Http跨域请求:JSONP实现原理及代码
Mar 19 Javascript
Js实现滚动变色的文字效果
Jun 16 Javascript
jQuery实现的图文高亮滚动切换特效实例
Aug 10 Javascript
javascript瀑布流式图片懒加载实例解析与优化
Feb 23 Javascript
深入理解vuex2.0 之 modules
Nov 20 Javascript
Node.js Buffer模块功能及常用方法实例分析
Jan 05 Javascript
vue踩坑记录之数组定义和赋值问题
Mar 20 Javascript
JavaScript大数相加相乘的实现方法实例
Oct 18 Javascript
js实现贪吃蛇小游戏(加墙)
Jul 31 #Javascript
vue实现简易图片左右旋转,上一张,下一张组件案例
Jul 31 #Javascript
vue实现给div绑定keyup的enter事件
Jul 31 #Javascript
简单了解JavaScript作用域
Jul 31 #Javascript
基于vue--key值的特殊用处详解
Jul 31 #Javascript
javascript开发实现贪吃蛇游戏
Jul 31 #Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
Jul 31 #Javascript
You might like
中国广播史趣谈 — 几个历史第一次
2021/03/01 无线电
PHP网页游戏学习之Xnova(ogame)源码解读(十)
2014/06/24 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
Yii2.0建立公共方法简单示例
2019/01/29 PHP
js 通用javascript函数库整理
2011/08/14 Javascript
利用js实现遮罩以及弹出可移动登录窗口
2013/07/08 Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
2013/10/09 Javascript
JavaScript中window.showModalDialog()用法详解
2014/12/18 Javascript
浅谈下拉菜单中的Option对象
2015/05/10 Javascript
javascript新闻跑马灯实例代码
2020/07/29 Javascript
jQuery事件对象总结
2016/10/17 Javascript
在JSP中如何实现MD5加密的方法
2016/11/02 Javascript
基于JavaScript实现Tab选项卡切换效果
2016/11/24 Javascript
js实现的在线调色板功能完整实例
2016/12/21 Javascript
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
2017/01/09 Javascript
vue组件父与子通信详解(一)
2017/11/07 Javascript
vue+vue-validator 表单验证功能的实现代码
2017/11/13 Javascript
vue计算属性computed的使用方法示例
2019/03/13 Javascript
[57:59]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第一场 11.05
2020/11/05 DOTA
python中定义结构体的方法
2013/03/04 Python
Python面向对象之私有属性和私有方法应用案例分析
2019/12/31 Python
vscode调试django项目的方法
2020/08/06 Python
全面介绍python中很常用的单元测试框架unitest
2020/12/14 Python
大学生优秀的自我评价分享
2013/10/22 职场文书
倡议书格式范文
2014/04/14 职场文书
公司副总经理任命书
2014/06/05 职场文书
电子商务专业毕业生求职信
2014/06/12 职场文书
经典团队口号大全
2014/06/21 职场文书
党员弘扬焦裕禄精神思想汇报
2014/09/10 职场文书
工作检讨书500字
2014/10/19 职场文书
2014年纪委工作总结
2014/12/05 职场文书
活动经费申请报告
2015/05/15 职场文书
2015年学校减负工作总结
2015/05/19 职场文书
中秋节作文(五年级)之关于月亮
2019/09/11 职场文书
MySQL导致索引失效的几种情况
2022/06/25 MySQL
微信小程序实现轮播图指示器
2022/06/25 Javascript