怎么限制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的超简单上下翻
Apr 20 Javascript
js 数组的for循环到底应该怎么写?
May 31 Javascript
jquery动态添加删除div 具体实现
Jul 20 Javascript
JS短路原理的应用示例 精简代码的途径
Dec 13 Javascript
详解javascript遍历方式
Nov 11 Javascript
微信小程序 表单Form实例详解(附源码)
Dec 22 Javascript
Bootstrap选项卡学习笔记分享
Feb 13 Javascript
基于canvas的二维码邀请函生成插件
Feb 14 Javascript
vue.js的手脚架vue-cli项目搭建的步骤
Aug 30 Javascript
使用selenium抓取淘宝的商品信息实例
Feb 06 Javascript
JavaScript时间日期操作实例小结【5个示例】
Dec 22 Javascript
JavaScript设计模式之门面模式原理与实现方法分析
Mar 09 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
thinkphp数据查询和遍历数组实例
2014/11/28 PHP
Symfony学习十分钟入门经典教程
2016/02/03 PHP
PHP函数引用返回的实例详解
2016/09/11 PHP
为何说PHP引用是个坑,要慎用
2018/04/02 PHP
jQuery1.6 使用方法一
2011/11/23 Javascript
js变量以及其作用域详解
2020/07/18 Javascript
探讨js字符串数组拼接的性能问题
2014/10/11 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
2015/03/18 Javascript
javascript实现label标签跳出循环操作
2016/03/06 Javascript
node.js实现端口转发
2016/04/14 Javascript
如何使用AngularJs打造权限管理系统【简易型】
2016/05/09 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
2016/10/27 Javascript
利用vue实现模态框组件
2016/12/19 Javascript
jQuery与js实现颜色渐变的方法
2016/12/30 Javascript
js css3实现图片拖拽效果
2017/03/04 Javascript
video.js 一个页面同时播放多个视频的实例代码
2018/11/27 Javascript
three.js实现圆柱体
2018/12/30 Javascript
JS实现数组深拷贝的方法分析
2019/03/06 Javascript
node express使用HTML模板的方法示例
2019/08/22 Javascript
python2.7无法使用pip的解决方法(安装easy_install)
2018/04/03 Python
使用Python计算玩彩票赢钱概率
2019/06/26 Python
python正则-re的用法详解
2019/07/28 Python
PageFactory设计模式基于python实现
2020/04/14 Python
运行python提示no module named sklearn的解决方法
2020/11/29 Python
python opencv肤色检测的实现示例
2020/12/21 Python
Staples英国官方网站:办公用品一站式采购
2017/10/06 全球购物
美国流行背包品牌:JanSport(杰斯伯)
2018/03/02 全球购物
学生实习自我鉴定
2013/10/11 职场文书
《鸿门宴》教学反思
2014/04/22 职场文书
煤矿安全协议书
2014/08/20 职场文书
干部作风整顿个人剖析材料
2014/10/06 职场文书
停电调休通知
2015/04/16 职场文书
党课主持词大全
2015/06/30 职场文书
《观潮》教学反思
2016/02/17 职场文书
CI Games宣布《堕落之王2》使用虚幻引擎5制作 预计将于2023年正式发售
2022/04/11 其他游戏
源码安装apache脚本部署过程详解
2022/09/23 Servers