怎么限制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 相关文章推荐
javascript基础的动画教程,直观易懂
Jan 10 Javascript
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
May 07 Javascript
jQuery操作CheckBox的方法介绍(选中,取消,取值)
Feb 04 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
May 02 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
May 20 Javascript
Javascript基础_嵌入图像的简单实现
Jun 14 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
Jul 28 Javascript
JavaScript创建对象_动力节点Java学院整理
Jun 27 Javascript
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
Sep 25 Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
May 16 Javascript
微信头像地址失效踩坑记附带解决方案
Sep 23 Javascript
vue跳转页面的几种方法(推荐)
Mar 26 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程序的方法
2009/03/09 PHP
深入浅析PHP7.0新特征(五大新特征)
2015/10/29 PHP
php实现36进制与10进制转换功能示例
2017/01/10 PHP
利用PHP实现一个简单的用户登记表示例
2017/04/25 PHP
PHP模型Model类封装数据库操作示例
2019/03/14 PHP
PHP字符串和十六进制如何实现互相转换
2020/07/16 PHP
jquery隐藏标签和显示标签的实例
2013/11/11 Javascript
jquery预览图片实现鼠标放上去显示实际大小
2014/01/16 Javascript
js文件Cookie存取值示例代码
2014/02/20 Javascript
深入理解JavaScript系列(29):设计模式之装饰者模式详解
2015/03/03 Javascript
jquery精度计算代码 jquery指定精确小数位
2017/02/06 Javascript
vue服务端渲染缓存应用详解
2018/09/12 Javascript
vue.config.js常用配置详解
2019/11/14 Javascript
[01:21:36]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python 正则表达式(转义问题)
2014/12/15 Python
使用Python的Twisted框架构建非阻塞下载程序的实例教程
2016/05/25 Python
python常用函数详解
2016/09/13 Python
Python实现二分查找与bisect模块详解
2017/01/13 Python
pandas按若干个列的组合条件筛选数据的方法
2018/04/11 Python
Python将list中的string批量转化成int/float的方法
2018/06/26 Python
对python mayavi三维绘图的实现详解
2019/01/08 Python
Python中dict和set的用法讲解
2019/03/28 Python
解决python super()调用多重继承函数的问题
2019/06/26 Python
详解python 中in 的 用法
2019/12/12 Python
基于python实现图片转字符画代码实例
2020/09/04 Python
如何在Canvas中添加事件的方法示例
2019/05/21 HTML / CSS
巴西女装购物网站:Eclectic
2018/04/24 全球购物
Servlet如何得到客户端机器的信息
2014/10/17 面试题
文明之星事迹材料
2014/05/09 职场文书
读群众路线的心得体会
2014/09/03 职场文书
党员自我评议个人对照检查材料
2014/09/16 职场文书
代领报检证委托书范本
2014/10/11 职场文书
公司食堂管理制度
2015/08/05 职场文书
远程教育学习心得体会
2016/01/23 职场文书
SpringBoot读取Resource下文件的4种方法
2021/07/02 Java/Android
win11无法登录onedrive错误代码0x8004def7怎么办 ?
2022/04/05 数码科技