怎么限制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 中介者模式实例
Dec 16 Javascript
JS动态增加删除UL节点LI及相关内容示例
May 21 Javascript
angularJS中$apply()方法详解
Jan 07 Javascript
JS实现文字链接感应鼠标淡入淡出改变颜色的方法
Feb 26 Javascript
JS动态改变浏览器标题的方法
Apr 06 Javascript
JS之获取样式的简单实现方法(推荐)
Sep 13 Javascript
js微信扫描二维码登录网站技术原理
Dec 01 Javascript
react-native使用react-navigation进行页面跳转导航的示例
Sep 07 Javascript
react-router browserHistory刷新页面404问题解决方法
Dec 29 Javascript
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
Oct 26 Javascript
Js on及addEventListener原理用法区别解析
Jul 11 Javascript
三种方式清除vue路由跳转router-link的历史记录
Apr 10 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
《一拳超人》埼玉一拳下去,他们存在了800年毫无意义!
2020/03/02 日漫
解析如何在PHP下载文件名中解决乱码的问题
2013/06/20 PHP
WampServer搭建php环境时遇到的问题汇总
2015/07/23 PHP
PHP面向对象中new self()与 new static()的区别浅析
2017/08/17 PHP
yii2.0整合阿里云oss上传单个文件的示例
2017/09/19 PHP
Laravel如何同时连接多个数据库详解
2019/08/13 PHP
PHP判断一个变量是否为整数、正整数的方法示例
2019/09/11 PHP
JavaScript Array Flatten 与递归使用介绍
2011/10/30 Javascript
jquery ajax同步异步的执行最终解决方案
2013/04/26 Javascript
JS在TextArea光标位置插入文字并实现移动光标到文字末尾
2013/06/21 Javascript
jquery调取json数据实现省市级联的方法
2015/01/29 Javascript
JavaScript将数字转换成大写中文的方法
2015/03/23 Javascript
js中 javascript:void(0) 用法详解
2015/08/11 Javascript
jQuery实现简单下拉导航效果
2015/09/07 Javascript
Bootstrap实现下拉菜单效果
2016/04/29 Javascript
浅谈JavaScript的push(),pop(),concat()方法
2016/06/03 Javascript
setTimeout学习小结
2017/02/08 Javascript
JavaScript ES6中export、import与export default的用法和区别
2017/03/14 Javascript
vue-router路由懒加载和权限控制详解
2017/12/13 Javascript
Node.js实现一个HTTP服务器的方法示例
2019/05/13 Javascript
微信小程序实现点击卡片 翻转效果
2019/09/04 Javascript
[00:32]DOTA2上海特级锦标赛 Ehome战队宣传片
2016/03/03 DOTA
Python正则表达式的使用范例详解
2014/08/08 Python
python基于Tkinter库实现简单文本编辑器实例
2015/05/05 Python
解决python Markdown模块乱码的问题
2019/02/14 Python
python爬取Ajax动态加载网页过程解析
2019/09/05 Python
Django框架ORM数据库操作实例详解
2019/11/07 Python
CSS3中的注音对齐属性ruby-align用法指南
2016/07/01 HTML / CSS
html5的自定义data-*属性与jquery的data()方法的使用
2014/07/02 HTML / CSS
HTML5 FileReader对象的具体使用方法
2020/05/22 HTML / CSS
Intersport西班牙:在线体育商店
2019/11/06 全球购物
土木工程毕业生推荐信
2013/10/28 职场文书
爱心捐助活动总结
2015/05/09 职场文书
新员工入职感想
2015/08/07 职场文书
导游词之安徽巢湖
2019/12/26 职场文书
Oracle查看表空间使用率以及爆满解决方案详解
2022/07/23 Oracle