VueElementUI实现:限制输入框只能输入正整数的问题

更新时间:2023-06-20 22:28:52 阅读: 评论:0

VueElementUI实现:限制输⼊框只能输⼊正整数的问题
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('不能输⼊⼩数点')
}el if(this.value.includes('-')){
console.log('不能输⼊负数')
}el{西餐食谱
console.log('正常')
}
})
⽅法四:利⽤正则匹配出 . 或者 -
⽅法是和⽅法⼆⼀样的,但是正则表达式则是:/^\d+\.\d$/
附上两个实例:
let regx = /^\d+\.\d+$/;
let num_two = 1.252;
const newNum_two = st(num_two)
console.log(newNum_two)
四楼的英文
解释:
/^d+:以任意⼀个数字开头 +:出现⼀次或多次
背井离乡的反义词\.:第⼆位为⼩数点
\d+$ :以任意⼀个数字结尾并且出现⼀次或多次
风险管控制度let regx_two = /^\-\d\.?\d*$/;幼儿园大班案例分析
let num_three = -2.53;
江西有哪些好玩的旅游景点const newNum_three = st(num_three)
console.log(newNum_three)
解释:
/
^\-:以 - 号开头
\d:第⼆位肯定是个数字
\.:第三位可能会出现0次或者1次的 .
\d* 以数字结尾出现0次或多次(这样就可以如果输⼊的单单是-2的话,也能匹配到)
OK分享到此结束,如果我之后还有什么办法,再来分享给⼤家,希望能给⼤家⼀个参考,也希望⼤家多多⽀持!

本文发布于:2023-06-20 22:28:52,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/fan/89/1047499.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:事件   数字   数点   内容   结尾   开头   代表
相关文章
留言与评论(共有 0 条评论)
   
验证码:
推荐文章
排行榜
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图