怎么限制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 20 Javascript
Ajax+Json 级联菜单实现代码
Oct 27 Javascript
JS获得选取checkbox整行数据的方法
Jan 28 Javascript
jquery实现鼠标悬浮停止轮播特效
Aug 20 Javascript
JS面向对象编程详解
Mar 06 Javascript
在React框架中实现一些AngularJS中ng指令的例子
Mar 06 Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
May 23 Javascript
jstree创建无限分级树的方法【基于ajax动态创建子节点】
Oct 25 Javascript
Bootstrap学习笔记 轮播(Carousel)插件
Mar 21 Javascript
Angular搜索场景中使用rxjs的操作符处理思路
May 30 Javascript
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 jQuery
详解JavaScript类型判断的四种方法
Oct 21 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 数组排序方法总结 推荐收藏
2010/06/30 PHP
php 抽象类的简单应用
2011/09/06 PHP
基于PHP创建Cookie数组的详解
2013/07/03 PHP
ThinkPHP上使用多说评论插件的方法
2014/10/31 PHP
PHP连接access数据库
2015/03/27 PHP
总结PHP中数值计算的注意事项
2016/08/14 PHP
详解php反序列化
2020/06/10 PHP
jQuery学习笔记之jQuery的DOM操作
2010/12/22 Javascript
JS实现点击下载的小例子
2013/07/10 Javascript
原生js和jquery实现图片轮播淡入淡出效果
2015/04/23 Javascript
bootstrap监听滚动实现头部跟随滚动
2016/11/08 Javascript
JavaScript中校验银行卡号的实现代码
2016/12/19 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
2017/03/02 Javascript
详解vue-cli + webpack 多页面实例应用
2017/04/25 Javascript
解决Vue大括号字符换行踩的坑
2020/11/09 Javascript
[01:01:22]VGJ.S vs OG 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
Python中实现最小二乘法思路及实现代码
2018/01/04 Python
python正则表达式爬取猫眼电影top100
2018/02/24 Python
Python+OpenCV实现图像融合的原理及代码
2018/12/03 Python
python使用插值法画出平滑曲线
2018/12/15 Python
机器学习实战之knn算法pandas
2019/06/22 Python
如何用Python提取10000份log中的产品信息
2021/01/14 Python
HTML5中的进度条progress元素简介及兼容性处理
2016/06/02 HTML / CSS
美国新蛋IT数码商城:Newegg.com
2016/07/21 全球购物
Shoes For Crews法国官网:美国领先的防滑鞋设计和制造商
2018/01/01 全球购物
Stutterheim瑞典:瑞典高级外套时装品牌
2019/06/24 全球购物
蒂娜商店:Tiina the Store
2019/12/07 全球购物
策划创业计划书
2014/02/06 职场文书
致跳远运动员加油稿
2014/02/11 职场文书
《商鞅南门立木》教学反思
2014/02/16 职场文书
公司授权委托书范文
2014/08/02 职场文书
机械工程及其自动化专业求职信
2014/08/08 职场文书
中学生教师节演讲稿
2014/09/03 职场文书
学雷锋倡议书
2015/01/19 职场文书
四十年同学聚会致辞
2015/07/28 职场文书
2016年优秀共产党员先进事迹材料
2016/02/29 职场文书