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 相关文章推荐
超级退弹代码
Jul 07 Javascript
javascript异步处理工作机制详解
Apr 13 Javascript
JavaScript实现的简单幂函数实例
Apr 17 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
Nov 30 Javascript
基于Node.js实现nodemailer邮件发送
Jan 26 Javascript
JS验证不重复验证码
Feb 10 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
Mar 13 Javascript
浅谈JS函数节流防抖
Oct 18 Javascript
Vue修改mint-ui默认样式的方法
Feb 03 Javascript
微信小程序image图片加载完成监听
Aug 31 Javascript
vue实现移动端图片上传功能
Dec 23 Javascript
vue实现锚点定位功能
Jun 29 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
php ignore_user_abort与register_shutdown_function 使用方法
2009/06/14 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
Laravel 框架路由原理与路由访问实例分析
2020/04/14 PHP
js程序中美元符号$是什么
2008/06/05 Javascript
Ubuntu 11.10 安装Node.js的方法
2011/11/30 Javascript
用js读、写、删除Cookie代码续篇
2014/12/03 Javascript
js实现简单的省市县三级联动效果实例
2016/02/18 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
2016/06/16 Javascript
jQuery检查元素存在性(推荐)
2016/09/17 Javascript
AngularJS开发教程之控制器之间的通信方法分析
2016/12/25 Javascript
JavaScript中值类型和引用类型的区别
2017/02/23 Javascript
jQuery滚动监听实现商城楼梯式导航效果
2017/03/06 Javascript
Node.js自定义实现文件路由功能
2017/09/22 Javascript
layui radio点击事件实现input显示和隐藏的例子
2019/09/02 Javascript
基于JavaScript实现留言板功能
2020/03/16 Javascript
[01:19:35]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第二局
2016/03/05 DOTA
比较详细Python正则表达式操作指南(re使用)
2008/09/06 Python
Python实现购物车功能的方法分析
2017/11/10 Python
python实现马丁策略的实例详解
2021/01/15 Python
html5新增的定时器requestAnimationFrame实现进度条功能
2018/12/13 HTML / CSS
阿拉伯世界最大的电子商务网站:Souq沙特阿拉伯
2016/10/28 全球购物
怎么处理XML的中文问题
2015/03/26 面试题
二手书店创业计划书
2014/01/16 职场文书
《三袋麦子》教学反思
2014/03/02 职场文书
交通事故协议书
2014/04/15 职场文书
中华魂演讲稿
2014/05/13 职场文书
高三霸气励志标语
2014/06/24 职场文书
施工安全责任书范本
2014/07/24 职场文书
实习协议书范本
2014/09/25 职场文书
党支部2014年度工作总结
2014/12/04 职场文书
高中班主任评语
2014/12/30 职场文书
幼儿园教师求职信
2015/03/20 职场文书
倡议书格式及范文
2015/04/29 职场文书
总结一下关于在Java8中使用stream流踩过的一些坑
2021/06/24 Java/Android
OpenCV绘制圆端矩形的示例代码
2021/08/30 Python
Vue.js中v-bind指令的用法介绍
2022/03/13 Vue.js