怎么限制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 面向对象 命名空间
May 13 Javascript
js unicode 编码解析关于数据转换为中文的两种方法
Apr 21 Javascript
Node.js 的异步 IO 性能探讨
Oct 08 Javascript
再谈javascript注入 黑客必备!
Sep 14 Javascript
JavaScript中this的四个绑定规则总结
Sep 26 Javascript
微信小程序 后台登录(非微信账号)实例详解
Mar 31 Javascript
Vuex 入门教程
Jan 10 Javascript
彻底理解js面向对象之继承
Feb 04 Javascript
在Vue环境下利用worker运行interval计时器的步骤
Aug 01 Javascript
在layui框架中select下拉框监听更改事件的例子
Sep 20 Javascript
解决vue页面渲染但dom没渲染的操作
Jul 27 Javascript
VUE : vue-cli中去掉路由中的井号#操作
Sep 04 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与Java进行通信的实现方法
2013/10/21 PHP
PHP cURL初始化和执行方法入门级代码
2015/05/28 PHP
使用PHP如何实现高效安全的ftp服务器(二)
2015/12/30 PHP
Thinkphp整合微信支付功能
2016/12/14 PHP
php根据地址获取百度地图经纬度的实例方法
2019/09/03 PHP
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
2006/12/22 Javascript
javascript 有趣而诡异的数组
2009/04/06 Javascript
Ext.MessageBox工具类简介
2009/12/10 Javascript
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
2011/06/27 Javascript
jQuery学习笔记 获取jQuery对象
2012/09/19 Javascript
JQuery基础语法小结
2015/02/27 Javascript
jquery简单插件制作(fn.extend)完整实例
2016/05/24 Javascript
JS实现禁止鼠标右键的功能
2016/10/15 Javascript
浅谈jquery页面初始化的4种方式
2016/11/27 Javascript
jQuery Validate验证表单时多个name相同的元素只验证第一个的解决方法
2016/12/24 Javascript
基于ES6作用域和解构赋值详解
2017/11/03 Javascript
Bootstrap实现下拉菜单多级联动
2017/11/23 Javascript
详解Angular5 路由传参的3种方法
2018/04/28 Javascript
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
2018/09/25 Javascript
微信上传视频文件提示(推荐)
2018/11/22 Javascript
10种JavaScript最常见的错误(小结)
2019/06/21 Javascript
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS OG
2018/03/30 DOTA
pandas.DataFrame 根据条件新建列并赋值的方法
2018/04/08 Python
详解Python静态网页爬取获取高清壁纸
2019/04/23 Python
python opencv角点检测连线功能的实现代码
2020/11/24 Python
DBA数据库管理员JAVA程序员架构师必看
2016/02/07 面试题
医药专业推荐信
2013/11/15 职场文书
外语系毕业生找工作的求职信
2013/11/28 职场文书
博士研究生自我鉴定范文
2013/12/04 职场文书
幼儿园亲子活动方案
2014/01/29 职场文书
解除劳动关系协议书范文
2014/09/11 职场文书
2014年公务员工作总结
2014/11/18 职场文书
小学体育组工作总结2015
2015/07/21 职场文书
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
2021/04/03 Javascript
详解JAVA的控制语句
2021/11/11 Java/Android
十大最强格斗系宝可梦,超梦X仅排第十,第二最重格斗礼仪
2022/03/18 日漫