怎么限制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中巧用cssText属性批量操作样式
Mar 13 Javascript
js获取字符串最后一位方法汇总
Nov 13 Javascript
kindeditor修复会替换script内容的问题
Apr 03 Javascript
jQuery旋转木马式幻灯片轮播特效
Dec 04 Javascript
学习JavaScript事件流和事件处理程序
Jan 25 Javascript
javascript实现获取图片大小及图片等比缩放的方法
Nov 24 Javascript
微信小程序 自己制作小组件实例详解
Dec 22 Javascript
Bootstrap表单控件使用方法详解
Jan 11 Javascript
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
Sep 04 Javascript
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
JavaScript封闭函数及常用内置对象示例
May 13 Javascript
jquery实现穿梭框功能
Jan 19 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实现的功能是显示8条基色色带
2006/10/09 PHP
WordPress中is_singular()函数简介
2015/02/05 PHP
PHP嵌套输出缓冲代码实例
2015/05/12 PHP
PHP中foreach()用法汇总
2015/07/02 PHP
提高php编程效率技巧
2015/08/13 PHP
PHP封装的验证码工具类定义与用法示例
2018/08/22 PHP
完美解决JS中汉字显示乱码问题(已解决)
2006/12/27 Javascript
利用jQuery实现可输入搜索文字的下拉框
2013/10/23 Javascript
Node.js编程中客户端Session的使用详解
2015/06/23 Javascript
详解javascript数组去重问题
2015/11/06 Javascript
JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
2016/06/17 Javascript
jquery判断对象是否为空并遍历对象的简单实例
2016/07/26 Javascript
在windows上用nodejs搭建静态文件服务器的简单方法
2016/08/11 NodeJs
Vue-cli-webpack搭建斗鱼直播步骤详解
2017/11/17 Javascript
mui back 返回刷新页面的实例
2017/12/06 Javascript
微信小程序swiper组件用法实例分析【附源码下载】
2017/12/07 Javascript
JS简单实现动态添加HTML标记的方法示例
2018/04/08 Javascript
bootstrap table实现合并单元格效果
2018/12/24 Javascript
jQuery AJAX应用实例总结
2020/05/19 jQuery
微信小程序仿抖音短视频切换效果的实例代码
2020/06/24 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
2020/10/27 Javascript
[02:25]DOTA2英雄基础教程 熊战士
2014/01/03 DOTA
Python的Django框架中settings文件的部署建议
2015/05/30 Python
python常用知识梳理(必看篇)
2017/03/23 Python
Python计算斗牛游戏概率算法实例分析
2017/09/26 Python
Python求出0~100以内的所有素数
2018/01/23 Python
Pipenv一键搭建python虚拟环境的方法
2018/05/22 Python
Html5移动端获奖无缝滚动动画实现示例
2018/06/25 HTML / CSS
美国克罗格超市在线购物:Kroger
2019/06/21 全球购物
到底Java是如何传递参数的?是by value或by reference?
2012/07/13 面试题
Net Remoting把服务器端激活两种模式
2014/01/22 面试题
办公文员的工作岗位职责
2013/11/12 职场文书
教师绩效考核方案
2014/01/21 职场文书
空气的环保标语
2014/06/12 职场文书
课文《燕子》教学反思
2016/02/17 职场文书
2019幼儿园感恩节活动策划书
2019/11/28 职场文书