首页 >> js开发 >> jsVue ElementUI实现:限制输入框只能输入正整数的问题js大全
jsVue ElementUI实现:限制输入框只能输入正整数的问题js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
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来规筛掉 . 和 -方法三:方法三:利用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('正常')
}
})
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)
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)
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分享到此结束,如果我之后还有什么办法,再来分享给大家,希望能给大家一个参考!
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('正常')
}
})
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)
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)
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分享到此结束,如果我之后还有什么办法,再来分享给大家,希望能给大家一个参考!
相关文章:
- jsvue 实现根据data中的属性值来设置不同的样式js大全
- jsVue打包部署到Nginx时,css样式不生效的解决方式js大全
- jselementui更改el-dialog关闭按钮的图标d的示例代码js大全
- js详解JS深拷贝与浅拷贝js大全
- jsvue-quill-editor 自定义工具栏和自定义图片上传路径操作js大全
- js浅谈在vue-cli3项目中解决动态引入图片img404的问题js大全
- js代码简介JavaScript错误处理机制
- jsVUE使用axios调用后台API接口的方法js大全
- jsVue登录拦截 登录后继续跳转指定页面的操作js大全
- JavaScriptjs数组中去除重复值的几种方法