怎么限制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 相关文章推荐
js 使FORM表单的所有元素不可编辑的示例代码
Oct 17 Javascript
node.js中的fs.readFile方法使用说明
Dec 15 Javascript
jQuery实现复选框成对选择及对应取消的方法
Mar 03 Javascript
有关json_decode乱码及NULL的问题
Oct 13 Javascript
js实现滚动条滚动到页面底部继续加载
Dec 19 Javascript
Vue数组更新及过滤排序功能
Aug 10 Javascript
初识 Vue.js 中的 *.Vue文件
Nov 22 Javascript
微信小程序tabBar用法实例详解
Dec 04 Javascript
详解Angular6.0使用路由步骤(共7步)
Jun 29 Javascript
简述JS浏览器的三种弹窗
Jul 15 Javascript
jQuery实现的简单歌词滚动功能示例
Jan 07 jQuery
jQuery实现表格的增、删、改操作示例
Jan 27 jQuery
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生成数组的使用示例 php全组合算法
2014/01/16 PHP
PHP正则表达式之捕获组与非捕获组
2015/11/06 PHP
简单了解将WordPress中的工具栏移到底部的小技巧
2015/12/31 PHP
动态改变textbox的宽高的js
2006/10/26 Javascript
Javascript JSQL,SQL无处不在,
2010/05/05 Javascript
Egret引擎开发指南之创建项目
2014/09/03 Javascript
充分发挥Node.js程序性能的一些方法介绍
2015/06/23 Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
2016/07/15 Javascript
浅谈js中function的参数默认值
2017/02/20 Javascript
Vue实现自带的过滤器实例
2017/03/09 Javascript
js实现图片放大展示效果
2017/08/30 Javascript
从vue基础开始创建一个简单的增删改查的实例代码(推荐)
2018/02/11 Javascript
vue多页面开发和打包正确处理方法
2018/04/20 Javascript
JS实现select选中option触发事件操作示例
2018/07/13 Javascript
vue2.0移动端滑动事件vue-touch的实例代码
2018/11/27 Javascript
Layui数据表格 前后端json数据接收的方法
2019/09/19 Javascript
NProgress显示顶部进度条效果及使用详解
2019/09/21 Javascript
用实例说明python的*args和**kwargs用法
2013/11/01 Python
python的keyword模块用法实例分析
2015/06/30 Python
Python3字符串学习教程
2015/08/20 Python
Python程序中的观察者模式结构编写示例
2016/05/27 Python
Python中input与raw_input 之间的比较
2017/08/20 Python
解决Spyder中图片显示太小的问题
2018/04/27 Python
详解Python self 参数
2019/08/30 Python
解决Python import docx出错DLL load failed的问题
2020/02/13 Python
tensorflow使用freeze_graph.py将ckpt转为pb文件的方法
2020/04/22 Python
python实现密度聚类(模板代码+sklearn代码)
2020/04/27 Python
Python3实现建造者模式的示例代码
2020/06/28 Python
台湾深度自由行旅游平台:Tripbaa趣吧
2017/10/10 全球购物
澳大利亚墨尔本的在线时装店:LORETA
2018/09/14 全球购物
活动志愿者自荐信
2014/01/27 职场文书
聘任书的写作格式及范文
2014/03/29 职场文书
2014年污水处理厂工作总结
2014/12/19 职场文书
2016年法制宣传月活动总结
2016/04/01 职场文书
Python虚拟环境virtualenv是如何使用的
2021/06/20 Python
Python 游戏大作炫酷机甲闯关游戏爆肝数千行代码实现案例进阶
2021/10/16 Python