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版的date函数(和PHP的date函数一样)
May 12 Javascript
js滑动提示效果代码分享
Mar 10 Javascript
JS组件系列之使用HTML标签的data属性初始化JS组件
Sep 14 Javascript
Vue.js实现模拟微信朋友圈开发demo
Apr 20 Javascript
Angular弹出模态框的两种方式
Oct 19 Javascript
Javascript 编码约定(编码规范)
Mar 11 Javascript
Vue验证码60秒倒计时功能简单实例代码
Jun 22 Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
Sep 30 Javascript
微信小程序实现保存图片到相册功能
Nov 30 Javascript
利用Angular2的Observables实现交互控制的方法
Dec 27 Javascript
vue中axios实现数据交互与跨域问题
May 12 Javascript
Electron+vue从零开始打造一个本地播放器的方法示例
Oct 27 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
PHP编程与应用
2006/10/09 PHP
解析php防止form重复提交的方法
2013/07/01 PHP
php中创建和调用webservice接口示例
2014/07/25 PHP
CodeIgniter视图使用注意事项
2016/01/20 PHP
DWR Ext 加载数据
2009/03/22 Javascript
js 判断上传文件大小及格式代码
2013/11/13 Javascript
使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
2013/12/11 Javascript
简述JavaScript对传统文档对象模型的支持
2015/06/16 Javascript
JavaScript操作XML/HTML比较常用的对象属性集锦
2015/10/30 Javascript
解决JavaScript数字精度丢失问题的方法
2015/12/03 Javascript
js计算时间差代码【包括计算,天,时,分,秒】
2016/04/26 Javascript
JS小数运算出现多为小数问题的解决方法
2016/06/02 Javascript
jquery实现网页定位导航
2016/08/23 Javascript
Vue-cli项目获取本地json文件数据的实例
2018/03/07 Javascript
浅谈JavaScript 代码简洁之道
2019/01/09 Javascript
详解Vue.js中引入图片路径的几种方式
2019/06/17 Javascript
[01:00:30]TFT vs VGJ.T Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
python文件操作之目录遍历实例分析
2015/05/20 Python
Python脚本处理空格的方法
2016/08/08 Python
tensorflow实现简单的卷积神经网络
2018/05/24 Python
使用Filter过滤python中的日志输出的实现方法
2019/07/17 Python
Matplotlib绘制雷达图和三维图的示例代码
2020/01/07 Python
python连接mysql有哪些方法
2020/06/24 Python
python中查看.db文件中表格的名字及表格中的字段操作
2020/07/07 Python
CSS3中各种颜色属性的使用教程
2016/05/17 HTML / CSS
css3实现元素环绕中心点布局的方法示例
2019/01/15 HTML / CSS
HTML5进度条特效
2014/12/18 HTML / CSS
实习生的自我评价
2014/01/08 职场文书
目标管理责任书
2014/04/15 职场文书
事业单位考核材料
2014/05/21 职场文书
信仰心得体会
2014/09/05 职场文书
上课迟到检讨书范文
2015/05/06 职场文书
农业项目投资意向书
2015/05/09 职场文书
解决numpy和torch数据类型转化的问题
2021/05/23 Python
VUE中的v-if与v-show区别介绍
2022/03/13 Vue.js
Linux中一对多配置日志服务器的详细步骤
2022/07/23 Servers