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 相关文章推荐
jscript之Open an Excel Spreadsheet
Jun 13 Javascript
jQuery 动画基础教程
Dec 25 Javascript
javascript 面向对象编程  function是方法(函数)
Sep 17 Javascript
jQuery打印指定区域Html页面并自动分页
Jul 04 Javascript
如何编写高质量JS代码(续)
Feb 25 Javascript
jQuery表单插件ajaxForm实例详解
Jan 17 Javascript
webpack 插件html-webpack-plugin的具体使用
Apr 09 Javascript
vue实现2048小游戏功能思路详解
May 09 Javascript
js实现简单模态框实例
Nov 16 Javascript
JavaScript之数组扁平化详解
Jun 03 Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
Sep 28 Javascript
vue使用echarts实现折线图
Mar 21 Vue.js
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
Protoss兵种对照表
2020/03/14 星际争霸
用PHP书写安全的脚本代码
2012/02/05 PHP
解决php-fpm.service not found问题的办法
2017/06/06 PHP
PHP学习记录之常用的魔术常量详解
2019/12/12 PHP
javascript基本语法分析说明
2008/06/15 Javascript
js过滤数组重复元素的方法
2010/09/05 Javascript
让图片旋转任意角度及JQuery插件使用介绍
2013/03/20 Javascript
JQUERY 设置SELECT选中项代码
2014/02/07 Javascript
javaScript如何处理从java后台返回的list
2014/04/24 Javascript
Jquery UI实现一次拖拽多个选中的元素操作
2020/12/01 Javascript
jQuery时间验证和转换为标准格式的时间格式
2017/03/06 Javascript
微信小程序tabBar用法实例详解
2017/12/04 Javascript
jQuery实现动态控制页面元素的方法分析
2017/12/20 jQuery
基于nodejs实现微信支付功能
2017/12/20 NodeJs
JS执行控制之节流模式实例分析
2018/12/21 Javascript
jQuery表单元素过滤选择器用法实例分析
2019/02/20 jQuery
vue视频播放暂停代码
2019/11/08 Javascript
用python实现的可以拷贝或剪切一个文件列表中的所有文件
2009/04/30 Python
django定期执行任务(实例讲解)
2017/11/03 Python
numpy使用fromstring创建矩阵的实例
2018/06/15 Python
python 3.6.5 安装配置方法图文教程
2018/09/18 Python
解决PyCharm控制台输出乱码的问题
2019/01/16 Python
Python和Java的语法对比分析语法简洁上python的确完美胜出
2019/05/10 Python
selenium+python环境配置教程详解
2019/05/28 Python
Python中list的交、并、差集获取方法示例
2019/08/01 Python
Python中IP地址处理IPy模块的方法
2019/08/16 Python
python shapely.geometry.polygon任意两个四边形的IOU计算实例
2020/04/12 Python
Ralph Lauren法国官网:美国高品味时装品牌
2017/12/08 全球购物
日语专业个人的求职信
2013/12/03 职场文书
九年级数学教学反思
2014/02/02 职场文书
抽奖活动主持词
2014/03/31 职场文书
祖国在我心中演讲稿400字
2014/05/04 职场文书
诚信考试标语
2014/06/24 职场文书
2015出纳试用期工作总结
2014/12/12 职场文书
综合素质评价思想道德自我评价
2015/03/09 职场文书
《追风筝的人》:人心中的成见是座大山,但请不忘初心
2019/11/15 职场文书