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 相关文章推荐
jQuery之折叠面板的深入解析
Jun 19 Javascript
javascript中hasOwnProperty() 方法使用指南
Mar 09 Javascript
js实现将选中值累加到文本框的方法
Aug 12 Javascript
Bootstrap每天必学之警告框插件
Apr 26 Javascript
JavaScript表单验证开发
Nov 23 Javascript
JavaScript评论点赞功能的实现方法
Mar 13 Javascript
微信小程序动态的加载数据实例代码
Apr 14 Javascript
Angular中响应式表单的三种更新值方法详析
Aug 22 Javascript
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 jQuery
JavaScript页面加载事件实例讲解
Sep 01 Javascript
JavaScript之Blob对象类型的具体使用方法
Nov 29 Javascript
Vue-cli assets SubDirectory及PublicPath区别详解
Aug 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
对象失去焦点时自己动提交数据的实现代码
2012/11/06 PHP
ThinkPHP3.1新特性之多层MVC的支持
2014/06/19 PHP
php 文件下载 出现下载文件内容乱码损坏的解决方法(推荐)
2016/11/16 PHP
Yii框架分页实现方法详解
2017/05/20 PHP
关于laravel模板中生成URL的几种模式总结
2019/10/18 PHP
[原创]IE view-source 无法查看看源码 JavaScript看网页源码
2009/07/19 Javascript
jQuery获取地址栏参数插件(模仿C#)
2010/10/26 Javascript
js中通过父级进行查找定位元素
2014/06/15 Javascript
给before和after伪元素设置js效果的方法
2015/12/04 Javascript
Vue.js计算属性computed与watch(5)
2016/12/09 Javascript
老生常谈javascript中逻辑运算符&&和||的返回值问题
2017/04/13 Javascript
vue快捷键与基础指令详解
2017/06/01 Javascript
用户管理的设计_jquery的ajax实现二级联动效果
2017/07/13 jQuery
如何解决.vue文件url引用文件的问题
2019/01/18 Javascript
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
2019/09/06 Javascript
python将字符串转换成数组的方法
2015/04/29 Python
Python脚本处理空格的方法
2016/08/08 Python
python爬虫自动创建文件夹的功能
2018/08/01 Python
Django的Modelforms用法简介
2019/07/27 Python
python3格式化字符串 f-string的高级用法(推荐)
2020/03/04 Python
jupyter notebook 恢复误删单元格或者历史代码的实现
2020/04/17 Python
解决python使用list()时总是报错的问题
2020/05/05 Python
完美解决python针对hdfs上传和下载的问题
2020/06/05 Python
Python加速程序运行的方法
2020/07/29 Python
英国床垫在线:Mattress Online
2016/12/07 全球购物
美国汽配连锁巨头Pep Boys官网:轮胎更换、汽车维修服务和汽车零部件
2017/01/14 全球购物
MIRTA官网:手工包,100%意大利制造
2020/02/11 全球购物
拓展培训心得体会
2014/01/04 职场文书
幼儿园实习生辞职信
2014/01/20 职场文书
彩色的非洲教学反思
2014/02/18 职场文书
公务员更新知识培训实施方案
2014/03/31 职场文书
学生不讲诚信检讨书
2014/09/29 职场文书
普通党员个人整改措施
2014/10/27 职场文书
优秀党员先进事迹材料
2014/12/18 职场文书
故宫导游词
2015/01/31 职场文书
就业意向书范本
2015/05/11 职场文书