Vue中结合ElementUI实现：限制输入框只能输入正整数

iamyoung001 发布于2019-08-23 12:24 / 3992人阅读

摘要：中结合实现限制输入框只能输入正整数如果觉得对您有所帮助，麻烦您动动您的小手指给点个赞呗中禁止输入小数和负数只允许输入正整数做法一利用禁止按键的方法，主要是依靠禁止按下减号以及小数点来完成的首先要监听键盘按下事件，因为上面的组件监听事件是没有

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分享到此结束，如果我之后还有什么办法，再来分享给大家

GPU云服务器云服务器 Js只能输入整数文本框输入限制 html5实现输入框 js只能输入数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98444.html

input框只允许输入正整数、正数(包含小数)的解决方法 vue.js实现

摘要：我来打自己脸了刚刚发现在中文输入法下是无效的有人能解决这个问题么如果要求只能输入数字怎么做设置那我如果想限制长度，此时会失效，限制长度太麻烦了并且还存在的一个问题是，当输入的是小数时，鼠标悬停在上会提示请输入有效值，两个最接近的值为和，这对我来打自己脸了!!!!...刚刚发现在中文输入法下是无效的,有人能解决这个问题么如果要求input只能输入数字怎么做？设置type=numbe...

el09xccxy 2019-08-23 11:51 评论0 收藏0
ElementUI日期选择器时间选择范围限制

Element是一套基于vue2.x的一个ui框架。官方文档也很详细，这里记录一个element-ui日期插件的补充官方文档中使用picker-options属性来限制可选择的日期，下面举例补充：单个日期时间输入框组件代码：情景1: 设置选择今天以及今天之后的日期 data (){ return { pickerOptions0: { disabl...

liangzai_cool 2019-08-26 14:01 评论0 收藏0
项目小结：手机邮箱正则，URL各种判断返回页面，input输入框输入符合却获取不到问题

摘要：手机邮箱正则近两年出来很多新号码，听说什么的都有了导致以前的正则不能用了这就很难过，总是过一段时间出一种新号码。因此，我决定使用返朴归真的手机正则。，然后制定的语法里，输入框里有符号的时候，为空。1.手机邮箱正则近两年出来很多新号码，听说199什么的都有了- -导致以前的正则不能用了....这就很难过，总是过一段时间出一种新号码。因此，我决定使用返朴归真的手机正则。手机正则：var re...

番茄西红柿 2019-04-23 13:13 评论0 收藏0
限制input输入小数只能到3位或者只能输入正整数(兼容ios)

摘要：限制输入数字只能输入正整数包括天解析事件在用户输入时触发，元素值发生变化时立即触发。加上，是为了适应苹果系统。限制输入数字只能输入小数点最多到第三位的数字解析加上括号即为分组，分组从左到右分别用来表示，每个括号为一组。我们在做表单输入时，有时候对于有些输入比较有限制，比如输入天数必须为正整数，再比如有些特殊需求需要输入保留小数点的后面n位。那么我们如何在输入环节就限制用户的输入情况呢...

zone 2019-08-23 15:27 评论0 收藏0
限制input输入小数只能到3位或者只能输入正整数(兼容ios)

摘要：限制输入数字只能输入正整数包括天解析事件在用户输入时触发，元素值发生变化时立即触发。加上，是为了适应苹果系统。限制输入数字只能输入小数点最多到第三位的数字解析加上括号即为分组，分组从左到右分别用来表示，每个括号为一组。我们在做表单输入时，有时候对于有些输入比较有限制，比如输入天数必须为正整数，再比如有些特殊需求需要输入保留小数点的后面n位。那么我们如何在输入环节就限制用户的输入情况呢...

chunquedong 2019-08-02 14:18 评论0 收藏0