Vue ElementUI实现实现:限制输入框只能输入正整数的问题 限制输入框只能输入正整数的问题 主要介绍了Vue ElementUI实现:限制输入框只能输入正整数的问题，具有很好的参考价值，希望对大家有所帮 助。一起跟随小编过来看看吧 input输入框中禁止输入小数和负数（*只允许输入正整数 *） 最近在做项目中碰见了这么个问题，需要输入数字，但是只能输入正整数，在网上找的没找到自己想要的，所以就自己想了两 个办法，在这里跟大家分享一下。（因为是刚毕业，第一次写博客，所以有点生疏，请各位大佬担待一些） 方法一：利用禁止按键的方法，主要是依靠禁止按下减号以及小数点来完成的 方法一： 利用禁止按键的方法，主要是依靠禁止按下减号以及小数点来完成的 首先要监听keyup（键盘按下）事件，因为elementUi上面的input组件监听事件是没有这个事件的，所以可能会报错，所以我 们需要加个vue事件的修饰符 .native，代表原生事件的意思。 然后我们传个$event对象进去来获取原生的DOM（可以简单理解为触发事件的本身） 接下来就是在methods中写这个函数了 具体的意思我已经写在上面了，按下键后，可以自己弹出一下keynum和keychar所代表的的字符或者键盘码，根据哪个判断都 可以，我选择使用键盘码来判断进入判断后我们就可以做交互了，最后我选择清掉用户所输入的数据。 方法二：利用正则表达式来规避掉小数点和负数 方法二： 利用正则表达式来规避掉小数点和负数 在这里呢使用的就是elementUI的事件了，我们监听一下失去焦点的时候要触发事件，同样的我们要传入进去$event参数 methods中编写函数 这里使用的正则的意思代表的是（针对没有接触过正则的同学，会的大佬们看看有什么错误没）： 首先我们先看开头的^和结尾的$这里分别代表匹配字符串的开头以及匹配字符串的结尾，而[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分享到此结束，如果我之后还有什么办法，再来分享给大家，希望能给大家一个参考，也希望大家多多支持我们！