jQuery使用正则表达式限制文本框只能输入数字


Posted in Javascript onJune 18, 2016

网站中的一个小功能:要求用户只能输入16位数字。

试过javascript的方法:

如:一种方法:

//只允许输入数字
function checkkey2(value, e) {
  var key = window.event ? e.keyCode : e.which;
  if ((key > 95 && key < 106) || (key > 47 && key < 60)) {

  }
  else if (key != 8) {
  if (window.event) //IE
  {
    e.returnValue = false; 
  }
  else //Firefox
  {
    e.preventDefault();
  }
  };
};

另一种方法:

用正则表达式限制只能输入数字:

onkeyup="value=value.replace(/[^/d] /g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^/d]/g,''))"

上面的两种方法我均用过,但多少都会出现一些问题,比如浏览器的兼容性问题,不能达到想要的效果等,所以,最后还是考虑用正则来自己写。

直接贴代码了,很简单的正则表达式:

<head>
  <meta http-equiv="x-ua-compatible" content="IE=EmulateIE7" />
  <title></title>
  <!-- http://www.cnblogs.com/babycool -->
  <script src="../js/jquery-1.7.2.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function () {
      $("#xxxxxx").keyup(function () {
        //如果输入非数字,则替换为'',如果输入数字,则在每4位之后添加一个空格分隔
        this.value = this.value.replace(/[^\d]/g, '').replace(/(\d{4})(?=\d)/g, "$1 ");
      })
    });
  </script>
</head>
<body>
  限制只能输入19个字符
  <input id="xxxxxx" type="text" name="name" value="" maxlength="19" />
  <br />
 
  <br />
  输入非数字替换为''
  <input type="text" name="name" value="" onkeyup="value=value.replace(/[^\d]/g,'')" />
  <br />
  <br />
</body>

页面效果:

jQuery使用正则表达式限制文本框只能输入数字

浏览器的兼容性:

我在IE7.8.9.10下,firefox,chrome下测试均可以。

以上就是本文的全部内容,希望这个方法也能给遇到相同问题的其他人带来帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS上传图片前的限制包括(jpg jpg gif及大小高宽)等
Dec 19 Javascript
js如何获取file控件的完整路径具体实现代码
May 15 Javascript
jquery设置按钮停顿3秒不可用
Mar 07 Javascript
jQuery学习笔记之jQuery.fn.init()的参数分析
Jun 09 Javascript
鼠标悬停小图标显示大图标
Jan 22 Javascript
Jquery删除css属性的简单方法
Dec 04 Javascript
js输入框使用正则表达式校验输入内容的实例
Feb 12 Javascript
Angularjs之ngModel中的值验证绑定方法
Sep 13 Javascript
JavaScript中七种流行的开源机器学习框架
Oct 11 Javascript
浅谈JS的原型和继承
May 08 Javascript
js对象简介与基本用法示例
Mar 13 Javascript
VUE UPLOAD 通过ACTION返回上传结果操作
Sep 07 Javascript
jQuery解决$符号命名冲突
Jun 18 #Javascript
prototype.js常用函数详解
Jun 18 #Javascript
在Mac OS上安装使用Node.js的项目自动化构建工具Gulp
Jun 18 #Javascript
Javascript中prototype的使用详解
Jun 18 #Javascript
jQuery无刷新上传之uploadify3.1简单使用
Jun 18 #Javascript
jQuery插件uploadify实现ajax效果的图片上传
Jun 18 #Javascript
JavaScript的this关键字的理解
Jun 18 #Javascript
You might like
PHP-MySQL教程归纳总结
2008/06/07 PHP
Laravel 5.3 学习笔记之 安装
2016/08/28 PHP
PHP中SERIALIZE和JSON的序列化与反序列化操作区别分析
2016/10/11 PHP
PHP中快速生成随机密码的几种方式
2017/04/17 PHP
laravel 模型查询按照whereIn排序的示例
2019/10/16 PHP
javascript 子窗体父窗体相互传值方法
2010/05/31 Javascript
jQuery EasyUI API 中文文档 - ProgressBar 进度条
2011/09/29 Javascript
浅析hasOwnProperty方法的应用
2013/11/20 Javascript
jQuery 快速结束当前正在执行的动画
2013/11/20 Javascript
javascript和jquery修改a标签的href属性
2013/12/16 Javascript
js+csss实现的一个带复选框的下拉框
2014/09/29 Javascript
JavaScript sub方法入门实例(把字符串显示为下标)
2014/10/17 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
2015/03/02 Javascript
jQuery+css实现的切换图片功能代码
2016/01/27 Javascript
javascript基本数据类型及类型检测常用方法小结
2016/12/14 Javascript
微信小程序技巧之show内容展示,上传文件编码问题
2017/01/23 Javascript
jQuery实现当拉动滚动条到底部加载数据的方法分析
2019/01/24 jQuery
js实现随机8位验证码
2020/07/24 Javascript
vue+layui实现select动态加载后台数据的例子
2019/09/20 Javascript
详解Python多线程Selenium跨浏览器测试
2017/04/01 Python
如何把外网python虚拟环境迁移到内网
2020/05/18 Python
keras 多gpu并行运行案例
2020/06/10 Python
Python requests上传文件实现步骤
2020/09/15 Python
Calzedonia美国官网:意大利风格袜子、打底裤和沙滩装
2018/07/19 全球购物
介绍一下Cookie和Session及他们之间的区别
2012/11/20 面试题
计算机网络专业自荐信
2014/07/04 职场文书
纪检干部个人对照检查材料
2014/09/23 职场文书
班子四风对照检查材料思想汇报
2014/09/29 职场文书
2014大学辅导员工作总结
2014/12/02 职场文书
2015年民主生活会发言材料
2014/12/15 职场文书
教师工作态度自我评价
2015/03/05 职场文书
小组组名及励志口号
2015/12/24 职场文书
小学班主任培训心得体会
2016/01/07 职场文书
初中思想品德教学反思
2016/02/24 职场文书
互联网创业商业模式以及赚钱法则有哪些?
2019/10/12 职场文书
使用python生成大量数据写入es数据库并查询操作(2)
2022/09/23 Python