为输入框加入数字js校验代码分享


Posted in Javascript onNovember 02, 2017

js限制只能数字输入,并且在把输入的“非法字符”清除掉之后将焦点停留在输入非法字符的位置,参考如下:

html部分:

<input value="" type="text" onkeyup="javascript:RepNumber(this)">

JavaScript部分:

function RepNumber(obj) {
  var reg = /^[\d]+$/g;
  if (!reg.test(obj.value)) {
    var txt = obj.value;
    txt.replace(/[^0-9]+/,
    function(char, index, val) { //匹配第一次非数字字符
      obj.value = val.replace(/\D/g, ""); //将非数字字符替换成""
      var rtextRange = null;
      if (obj.setSelectionRange) {
        obj.setSelectionRange(index, index);
      } else { //支持ie
        rtextRange = obj.createTextRange();
        rtextRange.moveStart('character', index);
        rtextRange.collapse(true);
        rtextRange.select();
      }
    })
  }
}

下面再分享一个实例:

function chkNumber(eleText)
    {
       var value =eleText.value;
       var len =value.length;
       for(vari=0;i<len;i++)
       {
           if(value.charAt(i)>"9"|| value.charAt(i)<"0")
           {
              alert("含有非数字字符");
              eleText.focus();
              break;
           }
       }
    }

总结

以上就是本文关于为输入框加入数字js校验代码分享的全部内容,希望对大家有所帮助。欢迎参阅本站:Java实现JS中的escape和UNescape代码分享、在 Node.js 中使用原生 ES 模块方法解析等,如有不足之处,欢迎留言指出!

Javascript 相关文章推荐
JAVASCRIPT车架号识别/验证函数代码 汽车车架号验证程序
Jan 08 Javascript
页面右下角弹出提示框示例代码js版
Aug 02 Javascript
JS中如何比较两个Json对象是否相等实例代码
Jul 13 Javascript
AngularJS ng-bind-template 指令详解
Jul 30 Javascript
JavaScript利用正则表达式替换字符串中的内容
Dec 12 Javascript
javascript中的try catch异常捕获机制用法分析
Dec 14 Javascript
JS限制输入框输入的实现代码
Jul 02 Javascript
通过vue手动封装on、emit、off的代码详解
May 29 Javascript
vue.js实现回到顶部动画效果
Jul 31 Javascript
vuex + keep-alive实现tab标签页面缓存功能
Oct 17 Javascript
vue项目中锚点定位替代方式
Nov 13 Javascript
TypeScript之调用栈的实现
Dec 31 Javascript
详谈js中标准for循环与foreach(for in)的区别
Nov 02 #Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
Nov 02 #Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
Nov 02 #Javascript
vue-resource + json-server模拟数据的方法
Nov 02 #Javascript
详解vue-cli项目中用json-sever搭建mock服务器
Nov 02 #Javascript
Vue-cli 使用json server在本地模拟请求数据的示例代码
Nov 02 #Javascript
vue项目中使用axios上传图片等文件操作
Nov 02 #Javascript
You might like
PHP zlib扩展实现页面GZIP压缩输出
2010/06/17 PHP
PHP使用zlib扩展实现GZIP压缩输出的方法详解
2018/04/09 PHP
PHP 7.4 新语法之箭头函数实例详解
2019/05/09 PHP
理解Javascript_11_constructor实现原理
2010/10/18 Javascript
用js实现判断当前网址的来路如果不是指定的来路就跳转到指定页面
2011/05/02 Javascript
EasyUI中实现form表单提交的示例分享
2015/03/01 Javascript
js实现人才网站职位选择功能的方法
2015/08/14 Javascript
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
2015/12/23 Javascript
JS随机洗牌算法之数组随机排序
2016/03/23 Javascript
解析javascript图片懒加载与预加载的分析总结
2016/10/27 Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
2017/02/15 Javascript
JS获取当前时间的实例代码(昨天、今天、明天)
2018/11/13 Javascript
vue项目首屏打开速度慢的解决方法
2019/03/31 Javascript
vue实现日历备忘录功能
2020/09/24 Javascript
浅谈Vue使用Elementui修改默认的最快方法
2020/12/05 Vue.js
浅谈python类属性的访问、设置和删除方法
2016/07/25 Python
对numpy中数组转置的求解以及向量内积计算方法
2018/10/31 Python
Django框架模板文件使用及模板文件加载顺序分析
2019/05/23 Python
python matplotlib库直方图绘制详解
2019/08/10 Python
浅析使用Python搭建http服务器
2019/10/27 Python
Python高级特性——详解多维数组切片(Slice)
2019/11/26 Python
Python Opencv 通过轨迹(跟踪)栏实现更改整张图像的背景颜色
2020/03/09 Python
python求解汉诺塔游戏
2020/07/09 Python
HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用
2013/01/30 HTML / CSS
德国街头和运动文化高品质商店:BSTN Store
2017/08/26 全球购物
欧洲领先的电子和电信零售商和服务提供商:Currys PC World Business
2017/12/05 全球购物
班长岗位职责
2013/11/10 职场文书
实习生自我鉴定
2013/12/12 职场文书
小学生新学期寄语
2014/01/19 职场文书
园林技术个人的自我评价
2014/02/15 职场文书
技校学生个人职业生涯规划范文
2014/03/03 职场文书
优秀教师演讲稿
2014/05/06 职场文书
文明家庭先进事迹材料
2014/05/14 职场文书
现场活动策划方案
2014/08/22 职场文书
镇班子对照检查材料思想汇报
2014/09/24 职场文书
2014年人大工作总结
2014/12/10 职场文书