js限制文本框只能输入数字方法小结


Posted in Javascript onJune 16, 2014

有时需要限制文本框输入内容的类型,本节分享下正则表达式限制文本框只能输入数字、小数点、英文字母、汉字等代码。

例如,输入大于0的正整数

<input onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}">

1,文本框只能输入数字代码(小数点也不能输入)

<input onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')">

2,只能输入数字,能输小数点. IE only

<input onkeyup="if(isNaN(value))execCommand('undo')" onafterpaste="if(isNaN(value))execCommand('undo')">
<input name=txt1 onchange="if(/\D/.test(this.value)){alert('只能输入数字');this.value='';}">

3,数字和小数点方法二

<input type=text t_value="" o_value="" onkeypress="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value" onkeyup="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value" onblur="if(!this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?|\.\d*?)?$/))this.value=this.o_value;else{if(this.value.match(/^\.\d+$/))this.value=0+this.value;if(this.value.match(/^\.$/))this.value=0;this.o_value=this.value}">

封装成单独的函数: 

function keyPress(ob) {
 if (!ob.value.match(/^[\+\-]?\d*?\.?\d*?$/)) ob.value = ob.t_value; else ob.t_value = ob.value; if (ob.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/)) ob.o_value = ob.value;
}
function keyUp(ob) {
 if (!ob.value.match(/^[\+\-]?\d*?\.?\d*?$/)) ob.value = ob.t_value; else ob.t_value = ob.value; if (ob.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/)) ob.o_value = ob.value;
    }
function onBlur(ob) {
if(!ob.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?|\.\d*?)?$/))ob.value=ob.o_value;else{if(ob.value.match(/^\.\d+$/))ob.value=0+ob.value;if(ob.value.match(/^\.$/))ob.value=0;ob.o_value=ob.value};
}

只需在调用,传入this对象即可!

4,只能输入字母和汉字

<input onkeyup="value=value.replace(/[\d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[\d]/g,''))" maxlength=10 name="Numbers">

5,只能输入英文字母和数字,不能输入中文

<input onkeyup="value=value.replace(/[^\w\.\/]/ig,'')">

6,只能输入数字和英文

<input onKeyUp="value=value.replace(/[^\d|chun]/g,'')">

7,小数点后只能有最多两位(数字,中文都可输入),不能输入字母和运算符号:

<input onKeyPress="if((event.keyCode<48 || event.keyCode>57) && event.keyCode!=46 || /\.\d\d$/.test(value))event.returnValue=false">

8,小数点后只能有最多两位(数字,字母,中文都可输入),可以输入运算符号:

<input onkeyup="this.value=this.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')">

这篇文章就介绍到这了,需要的朋友可以参考一下

Javascript 相关文章推荐
学习YUI.Ext第七日-View&amp;JSONView Part Two-一个画室网站的案例
Mar 10 Javascript
Jquery中显示隐藏的实现代码分析
Jul 26 Javascript
用html+css+js实现的一个简单的图片切换特效
May 28 Javascript
很不错的两款Bootstrap Icon图标选择组件
Jan 28 Javascript
AngularJS之依赖注入模拟实现
Aug 19 Javascript
使用Angular.js开发的注意事项
Oct 19 Javascript
Angular中自定义Debounce Click指令防止重复点击
Jul 26 Javascript
微信小程序媒体组件详解(视频,音乐,图片)
Sep 19 Javascript
js面向对象之实现淘宝放大镜
Jan 15 Javascript
Vue列表如何实现滚动到指定位置样式改变效果
May 09 Javascript
vuex中store存储store.commit和store.dispatch的用法
Jul 24 Javascript
js绘制一条直线并旋转45度
Aug 21 Javascript
JS实现简单的顶部定时关闭层效果
Jun 15 #Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
Jun 15 #Javascript
鼠标移到图片上变大显示而不是放大镜效果
Jun 15 #Javascript
js中的如何定位固定层的位置
Jun 15 #Javascript
Extjs Label的 fieldLabel和html属性值对齐的方法
Jun 15 #Javascript
jquery实现通用版鼠标经过淡入淡出效果
Jun 15 #Javascript
jQuery实现的原图对比窗帘效果
Jun 15 #Javascript
You might like
附件名前加网站名
2008/03/23 PHP
PHPExcel内存泄漏问题解决方法
2015/01/23 PHP
PHP模块化安装教程
2016/06/01 PHP
Aster vs KG BO3 第二场2.19
2021/03/10 DOTA
IE8 引入跨站数据获取功能说明
2008/07/22 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
2013/11/30 Javascript
JS长整型精度问题实例分析
2015/01/13 Javascript
一道常被人轻视的web前端常见面试题(JS)
2016/02/15 Javascript
JavaScript用构造函数如何获取变量的类型名
2016/12/23 Javascript
常见的浏览器Hack技巧整理
2017/06/29 Javascript
基于JavaScript实现带数据验证和复选框的表单提交
2017/08/23 Javascript
JS中的两种数据类型及实现引用类型的深拷贝的方法
2018/08/12 Javascript
es6 filter() 数组过滤方法总结
2019/04/03 Javascript
微信公众号生成新浪短网址的实现(快速生成)
2019/08/18 Javascript
React中使用UMEditor的方法示例
2019/12/27 Javascript
微信小程序实现时间戳格式转换
2020/07/20 Javascript
[01:59][TI9趣味视频] 全明星赛奖励
2019/08/23 DOTA
Python中的localtime()方法使用详解
2015/05/22 Python
Python写入数据到MP3文件中的方法
2015/07/10 Python
python中pylint使用方法(pylint代码检查)
2018/04/06 Python
Python中dict和set的用法讲解
2019/03/28 Python
赫里福德的一家乡村零售商店:Philip Morris & Son
2017/06/25 全球购物
英国顶级水晶珠宝零售商之一:Tresor Paris
2019/04/27 全球购物
描述内存分配方式以及它们的区别
2016/10/15 面试题
主管职责范文
2013/11/09 职场文书
数控专业应届生求职信
2013/11/27 职场文书
国际贸易个人求职信范文
2014/01/04 职场文书
电大毕业个人生自我鉴定
2014/03/26 职场文书
仓库文员岗位职责
2014/04/06 职场文书
精神文明建设先进工作者事迹材料
2014/05/02 职场文书
村党支部公开承诺书
2014/05/29 职场文书
财务会计专业求职信
2014/06/09 职场文书
促销活动总结怎么写
2014/06/25 职场文书
话题作文之自信作文
2019/11/15 职场文书
MySQL数据库之内置函数和自定义函数 function
2022/06/16 MySQL
Windows Server 版本 20H2 于 8 月 9 日停止支持,Win10 版本 21H1 将于 12 月结束支
2022/07/23 数码科技