DDR爱好者之家

Vue ElementUI实现:限制输入框只能输入正整数的问题
站长资源 2024/11/24 佚名
68 1538
DDR爱好者之家 Design By 杰米

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分享到此结束，如果我之后还有什么办法，再来分享给大家，希望能给大家一个参考，也希望大家多多支持！

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米