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 相关文章推荐
JS getStyle获取最终样式函数代码
Apr 01 Javascript
Extjs4 关于Store的一些操作(加载/回调/添加)
Apr 18 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
Feb 13 Javascript
使用jquery实现IE下按backspace相当于返回操作
Mar 18 Javascript
Javascript让DEDECMS告别手写Tag
Sep 01 Javascript
微信小程序 less文件编译成wxss文件实现办法
Dec 05 Javascript
基于JavaScript实现数码时钟效果
Mar 30 Javascript
js实现数组和对象的深浅拷贝
Sep 30 Javascript
详解如何让Express支持async/await
Oct 09 Javascript
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
May 15 Javascript
vue实现带过渡效果的下拉菜单功能
Feb 19 Javascript
JS数组reduce()方法原理及使用技巧解析
Jul 14 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
8个PHP程序员常用的功能汇总
2014/12/18 PHP
php实现在站点里面添加邮件发送的功能
2020/04/28 PHP
thinkphp3.2.3 分页代码分享
2016/07/28 PHP
总结PHP如何获取当前主机、域名、网址、路径、端口和参数等
2016/09/09 PHP
PHP实现的简单留言板功能示例【基于thinkPHP框架】
2018/12/07 PHP
php提供实现反射的方法和实例代码
2019/09/17 PHP
jQuery maxlength文本字数限制插件
2010/04/16 Javascript
自己整理的一个javascript日期处理函数
2010/10/16 Javascript
jQuery学习笔记 获取jQuery对象
2012/09/19 Javascript
JavaScript自定义事件介绍
2013/08/29 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
2014/09/26 Javascript
深入分析Javascript事件代理
2016/01/30 Javascript
JS实现title标题栏文字不间断滚动显示效果
2016/09/07 Javascript
Bootstrap 手风琴菜单的实现代码
2017/01/20 Javascript
vue分类筛选filter方法简单实例
2017/03/30 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
2017/08/15 Javascript
vue-router实现组件间的跳转(参数传递)
2017/11/07 Javascript
通过JS深度判断两个对象字段相同
2019/06/14 Javascript
关于vue项目中搜索节流的实现代码
2019/09/17 Javascript
微信小程序wx.request的简单封装
2019/11/13 Javascript
python使用三角迭代计算圆周率PI的方法
2015/03/20 Python
利用matplotlib+numpy绘制多种绘图的方法实例
2017/05/03 Python
读取本地json文件,解析json(实例讲解)
2017/12/06 Python
Python数据集切分实例
2018/12/08 Python
python如何随机生成高强度密码
2020/08/19 Python
Python 实现微信自动回复的方法
2020/09/11 Python
安德玛加拿大官网:Under Armour加拿大
2019/10/02 全球购物
加拿大领先家居家具网上购物:Aosom.ca
2020/05/27 全球购物
公休请假条
2014/04/11 职场文书
学习方法演讲稿
2014/05/10 职场文书
行政专员岗位职责说明书
2014/09/01 职场文书
员工试用期自我鉴定范文
2014/09/15 职场文书
行政执法作风整顿剖析材料
2014/10/11 职场文书
2015年检验员工作总结范文
2015/04/30 职场文书
JavaWeb 入门:Hello Servlet
2021/07/16 Java/Android
Ajax实现异步加载数据
2021/11/17 Javascript