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

el09xccxy 发布于2019-08-23 11:51 / 3062人阅读

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

我来打自己脸了!!!!...刚刚发现在中文输入法下是无效的,有人能解决这个问题么

如果要求input只能输入数字怎么做？
设置type="number" ? 那我如果想限制长度，此时maxLength=“6” 会失效，js限制长度？太麻烦了

并且type="number" 还存在的一个问题是，当输入的是小数时，鼠标悬停在input上会提示“请输入有效值，两个最接近的值为0和1”，这对于用户体验来说非常差，非常容易误导用户，

那就只能设置type="text"了，但是设置type="text"又会导致input可以输入非数字了，于是网上百度google找的一大堆各种通过js去控制的，比如onkeyup事件等，检测到输入的是非数字就截取掉，替换掉，这能够实现只能输入数字，但是正如标题所说，只允许正整数和正小数，而且还存在字母e 和输入1.1.111.....1 这种情况,依然通过这些方法去实现未免太麻烦了

今天，分享一下自己实现只能输入正整数和正小数,一个vue指令就可以解决！

只能输入正整数
根据keypress事件，监视键盘keyCode码，结合数字正则表达式判断键入的keyCode是否是数字，如果非数字则调用preventDefault事件阻止默认行为
代码中的正则使得只能输入0-9，其他所有的字符都无法输入，简单粗暴

Vue.directive("enterNumber", {
  inserted: function (el) {
    el.addEventListener("keypress",function(e){
      e = e || window.event;
      let charcode = typeof e.charCode == "number" ? e.charCode : e.keyCode;
      let re = /d/;
      if(!re.test(String.fromCharCode(charcode)) && charcode > 9 && !e.ctrlKey){
          if(e.preventDefault){
              e.preventDefault();
          }else{
              e.returnValue = false;
          }                            
      }
    });
  }
});

只能输入正数(包含小数)
这个指令是在上面指令上做的修改，即允许输入小数点，但是如果单纯的允许输入小数点，那就会造成输入1.1....1....1...1这种无数小数点的情况，所有这里的处理方式是如果小数点是第一次输入则放行，但是在下次按下键盘上的小数点keyCode 时会对输入的value值进行判断，如果value值存在小数点，则调用preventDefault() 阻止事件

Vue.directive("enterNumber2", {
  inserted: function (el) {
    el.addEventListener("keypress",function(e){
      e = e || window.event;
      let charcode = typeof e.charCode == "number" ? e.charCode : e.keyCode;
      let re = /d/;
      if(charcode == 46){
        if(el.value.includes(".")){
          e.preventDefault();
        }
        return;
      }else if(!re.test(String.fromCharCode(charcode)) && charcode > 9 && !e.ctrlKey){
        if(e.preventDefault){
          e.preventDefault();
        }else{
            e.returnValue = false;
        }
      }
    });
  }
});

使用方法
将上诉代码放在main.js中，然后在input框上添加自定义指令，注意自定义指令要以v-开头，并且驼峰命名要写在小写的形式
注:这时候的input框type只需要使用text类型就可以了，不要使用number类型，不然会出现“请输入有效值，两个最接近的值为0和1”

//在只允许输入正整数的情况下，type="number" 可以防止输入中文，step="0.0000000001" 可以处理输入小数时的“请输入有效值，两个.....”

不知道这段代码有没有可优化的地方，或者存在什么问题，如有其他更好的建议，欢迎留言

云服务器 GPU云服务器小数转整数 php 小数取整数 jsp小数点保留整数 php整数转4位小数

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

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

正则表达式使用及常见表达式汇总

摘要：在这个过程中使用了一些正则表达式，使用合适的工具做合适的事情果然可以事半功倍。基本的使用方法就是以上几种，接下来对常用的正则表达式进行一下总结。最近接到一个内部搜索业务，本来是使用solr构建的分词搜索，但是在前期的数据量并没有那么大的情况下，使用者反馈使用分词反而不如精确匹配来的好用，所以运用相关正则表达式重写了一套搜索接口直接进行数据库检索，准备等数据量大起来以后再接入solr。...

Scorpion 2019-08-26 11:47 评论0 收藏0
基于PHP/CURL/codeIgniter的Spider Webbot爬虫[7]常用正则表达式

摘要：验证是否含有等字符只能输入汉字验证地址验证验证电话号码正确格式为，，，，，。验证身份证号位或位数字验证一年的个月正确格式为和验证一个月的天正确格式为和。一、校验数字的表达式 1 数字：^[0-9]*$ 2 n位的数字：^d{n}$ 3 至少n位的数字：^d{n,}$ 4 m-n位的数字：^d{m,n}$ 5 零和非零开头的数字：^(0|1-9*)$ 6 非零开头的最多带两位小数的数字...

wow_worktile 2019-07-01 14:10 评论0 收藏0
Java017-正则表达式

摘要：好处正则的出现，对字符串的复杂操作变得更为简单。将正则和字符串关联对字符串进行匹配。替换其实用的就是类中的获取先要将正则表达式编译成正则对象。用于描述正则表达式，可以对正则表达式进行解析。定义其实是用来操作字符串的一些规则。其实更多是用正则解决字符串操作的问题。好处正则的出现，对字符串的复杂操作变得更为简单。特点将对字符串操作的代码用一些符号来表示。只要使用了指定符号，就可...

浠ラ箍 2019-08-16 14:46 评论0 收藏0
常用正则表达式

摘要：很多不太懂正则的朋友，在遇到需要用正则校验数据时，往往是在网上去找很久，结果找来的还是不很符合要求。所以我最近把开发中常用的一些正则表达式整理了一下，在这里分享一下。给自己留个底，也给朋友们做个参考。很多不太懂正则的朋友，在遇到需要用正则校验数据时，往往是在网上去找很久，结果找来的还是不很符合要求。所以我最近把开发中常用的一些正则表达式整理了一下，在这里分享一下。给自己留个底，也给朋...

Jioby 2019-08-26 13:49 评论0 收藏0
常用正则表达式公式总结

摘要：一校验数字的表达式数字位的数字至少位的数字位的数字零和非零开头的数字非零开头的最多带两位小数的数字带位小数的正数或负数正数负数和小数有两位小数的正实数有位小数的正实数非零的正整数或或非零的负整数或一、校验数字的表达式数字：^[0-9]*$ n位的数字：^d{n}$ 至少n位的数字：^d{n,}$ m-n位的数字：^d{m,n}$ 零和非零开头的数字：^(0|[1-9][0...

Moxmi 2019-08-23 17:58 评论0 收藏0