怎么限制input的text里输入的值只能是数字(正则、js)


Posted in Javascript onMay 16, 2016

当我们在一些网站注册账号、填写信息是,不小心将电话号码填写成汉字或其他英文字母了,这显然是不正确的。为了帮助用户更好地纠正输入时的错误,在表单中填写信息时,需要限制手机号、邮编、电话号码这类文本框不能输入其他字符,只能是数字。

通过使用正则匹配输入的时候只是数字:

var numRegex = /\D/g

再通过JavaScript的onblur 事件:

定义和用法

onblur 事件会在对象失去焦点时发生。

Onblur 经常用于Javascript验证代码,一般用于表单输入框

语法

HTML 中:

<element onblur="SomeJavaScriptCode">

JavaScript 中:

object.onblur= function(){
//操作
myScript; 
}

JavaScript 中, 使用 addEventListener() 方法:

 

object.addEventListener('blur',myScript);

最终DEMO代码:

var numRegexFn = function(obj){
obj.value = obj.value.replace(numRegex,'');
if(!obj.value){
alert('请输入数字');
}else{
alert('pass');
}
}
phone.onblur = function(){
numRegexFn(this);
}

以上所述是小编给大家介绍的使用正则表达式和js限制只能输入数字的相关内容,希望对大家有所帮助,也希望大家多多的关注三水点靠木网站!

Javascript 相关文章推荐
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
Feb 23 Javascript
js操纵跨frame的三级联动select下拉选项实例介绍
May 19 Javascript
JS两种定义方式的区别、内部原理
Nov 21 Javascript
js中Math之random,round,ceil,floor的用法总结
Dec 26 Javascript
FF IE浏览器修改标签透明度的方法
Jan 27 Javascript
js实现的Easy Tabs选项卡用法实例
Sep 06 Javascript
jQuery.deferred对象使用详解
Mar 18 Javascript
JS判断iframe是否加载完成的方法
Aug 03 Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
Apr 08 Javascript
利用Node.js批量抓取高清妹子图片实例教程
Aug 02 Javascript
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 jQuery
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
Mar 23 Javascript
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
May 16 #Javascript
在javascript中创建对象的各种模式解析
May 16 #Javascript
Bootstrap3 input输入框插入glyphicon图标的方法
May 16 #Javascript
论Bootstrap3和Foundation5网格系统的异同
May 16 #Javascript
Javascript基础教程之比较null和undefined值
May 16 #Javascript
javascript对象的相关操作小结
May 16 #Javascript
WEB前端开发框架Bootstrap3 VS Foundation5
May 16 #Javascript
You might like
用PHP开发GUI
2006/10/09 PHP
php实现smarty模板无限极分类的方法
2015/12/07 PHP
yii2中使用Active Record模式的方法
2016/01/09 PHP
Yii2 加载css、js 载静态资源的方法
2017/03/10 PHP
Prototype使用指南之selector.js
2007/01/10 Javascript
JavaScript入门教程(12) js对象化编程
2009/01/31 Javascript
Zero Clipboard js+swf实现的复制功能使用方法
2010/03/07 Javascript
jQuery 源码分析笔记(6) jQuery.data
2011/06/08 Javascript
javascript判断机器是否联网的2种方法
2013/08/09 Javascript
JQuery实现鼠标移动到图片上显示边框效果
2014/01/09 Javascript
JavaScript操作Oracle数据库示例
2015/03/06 Javascript
JavaScript代码生成PDF文件的方法
2016/02/26 Javascript
Google 地图类型详解及示例代码
2016/08/06 Javascript
ionic2打包android时gradle无法下载的解决方法
2017/04/05 Javascript
使用ajax的post同步执行(实现方法)
2017/12/21 Javascript
vue.js实现格式化时间并每秒更新显示功能示例
2018/07/07 Javascript
Vue页面跳转动画效果的实现方法
2018/09/23 Javascript
详解Vue前端对axios的封装和使用
2019/04/01 Javascript
vue 中使用 watch 出现了如下的报错的原因分析
2019/05/21 Javascript
[39:11]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第二局
2016/02/28 DOTA
pymssql数据库操作MSSQL2005实例分析
2015/05/25 Python
Python在不同目录下导入模块的实现方法
2017/10/27 Python
Tornado高并发处理方法实例代码
2018/01/15 Python
python实现可视化动态CPU性能监控
2018/06/21 Python
Python实现基于KNN算法的笔迹识别功能详解
2018/07/09 Python
Python类中方法getitem和getattr详解
2019/08/30 Python
python 匿名函数与三元运算学习笔记
2020/10/23 Python
浅析python字符串前加r、f、u、l 的区别
2021/01/24 Python
用css3制作纸张效果(外翻卷角)
2013/02/01 HTML / CSS
突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌面通知)
2013/01/31 HTML / CSS
lookfantastic荷兰:在线购买奢华护肤、护发和化妆品
2018/11/27 全球购物
德国在线香料制造商:Gewürzland
2020/03/10 全球购物
SOKOLOV官网:俄罗斯珠宝首饰品牌
2021/01/02 全球购物
System.Array.CopyTo()和System.Array.Clone()有什么区别
2016/06/20 面试题
政府个人对照检查材料
2014/08/28 职场文书
MySQL子查询中order by不生效问题的解决方法
2021/08/02 MySQL