怎么限制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 相关文章推荐
推荐10个超棒的jQuery工具提示插件
Oct 11 Javascript
情人节专属 纯js脚本1k大小的3D玫瑰效果
Feb 11 Javascript
常用DOM整理
Jun 16 Javascript
js+ajax实现获取文件大小的方法
Dec 08 Javascript
JavaScript中循环遍历Array与Map的方法小结
Mar 12 Javascript
JS检测页面中哪个HTML标签触发点击事件的方法
Jun 17 Javascript
jQuery替换节点用法示例(使用replaceWith方法)
Sep 08 Javascript
js css自定义分页效果
Feb 24 Javascript
Avalonjs双向数据绑定与监听的实例代码
Jun 23 Javascript
JavaScrip关于创建常量的知识点
Dec 07 Javascript
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 jQuery
WebStorm无法正确识别Vue3组合式API的解决方案
Feb 18 Vue.js
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 chr() ord()中文截取乱码问题解决方法
2008/09/08 PHP
PHP中PDO的事务处理分析
2016/04/07 PHP
Thinkphp页面跳转设置跳转等待时间的操作
2019/10/16 PHP
Thinkphp 在api开发中异常返回依然是html的解决方式
2019/10/16 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
2019/11/14 PHP
php swoft框架实例用法
2020/12/22 PHP
Js 获取HTML DOM节点元素的方法小结
2009/04/24 Javascript
extjs 学习笔记(三) 最基本的grid
2009/10/15 Javascript
Jquery Ajax学习实例 向页面发出请求,返回XML格式数据
2010/03/14 Javascript
javascript下string.format函数补充
2010/08/24 Javascript
SwfUpload在IE10上不出现上传按钮的解决方法
2013/06/25 Javascript
jQuery不兼容input的change事件问题解决过程
2014/12/05 Javascript
JavaScript代码生成PDF文件的方法
2016/02/26 Javascript
jQuery实现区域打印功能代码详解
2016/06/17 Javascript
jquery事件绑定解绑机制源码解析
2016/09/19 Javascript
微信小程序 定义全局数据、函数复用、模版等详细介绍
2016/10/27 Javascript
jQuery图片切换动画效果
2017/02/28 Javascript
js canvas实现QQ拨打电话特效
2017/05/10 Javascript
详解webpack与SPA实践之开发环境搭建
2017/12/18 Javascript
node 使用 async 控制并发的方法
2018/05/07 Javascript
如何在 JavaScript 中更好地利用数组
2018/09/27 Javascript
vue页面切换过渡transition效果
2018/10/08 Javascript
微信小程序CSS3动画下拉菜单效果
2018/11/04 Javascript
微信小程序云开发 搭建一个管理小程序
2019/05/17 Javascript
详解基于 Node.js 的轻量级云函数功能实现
2019/07/08 Javascript
微信小程序实现弹框效果
2020/05/26 Javascript
vue中如何自定义右键菜单详解
2020/12/08 Vue.js
vue 动态添加的路由页面刷新时失效的原因及解决方案
2021/02/26 Vue.js
[03:11]DOTA2上海特锦赛小组赛第一日recap精彩回顾
2016/02/28 DOTA
详谈Python高阶函数与函数装饰器(推荐)
2017/09/30 Python
Python3列表内置方法大全及示例代码小结
2019/05/10 Python
Python实现点云投影到平面显示
2020/01/18 Python
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
2014/05/03 HTML / CSS
美国受欢迎的眼影品牌:BH Cosmetics
2016/10/25 全球购物
村党支部公开承诺书
2014/05/29 职场文书
党的群众路线剖析材料
2014/10/09 职场文书