怎么限制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 无符号右移运算符
Apr 17 Javascript
jquery对象和DOM对象的区别介绍
Aug 09 Javascript
判断ie的两种简单方法
Aug 12 Javascript
特殊日期提示功能的实现方法
Jun 16 Javascript
dropload.js插件下拉刷新和上拉加载使用详解
Oct 20 Javascript
webpack源码之loader机制详解
Apr 06 Javascript
js脚本中执行java后台代码方法解析
Oct 11 Javascript
element-ui点击查看大图的方法示例
Dec 14 Javascript
vuex的使用和简易实现
Jan 07 Vue.js
JavaScript实现班级抽签小程序
May 19 Javascript
vite+vue3.0+ts+element-plus快速搭建项目的实现
Jun 24 Vue.js
详解JS数组方法
Nov 20 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+ajax实现图片文件上传功能实例
2014/06/17 PHP
Symfony实现行为和模板中取得request参数的方法
2016/03/17 PHP
php 实现Hash表功能实例详解
2016/11/29 PHP
PHP四种排序算法实现及效率分析【冒泡排序,插入排序,选择排序和快速排序】
2018/04/27 PHP
php实现二叉树中和为某一值的路径方法
2018/10/14 PHP
Thinkphp5框架ajax接口实现方法分析
2019/08/28 PHP
JQuery从头学起第一讲
2010/07/04 Javascript
16个最流行的JavaScript框架[推荐]
2011/05/29 Javascript
关于Javascript与iframe的那些事儿
2013/07/04 Javascript
跟我学Nodejs(二)--- Node.js事件模块
2014/05/21 NodeJs
javascript转换静态图片,增加粒子动画效果
2015/05/28 Javascript
JavaScript中的toUTCString()方法使用详解
2015/06/12 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
2015/10/09 Javascript
javascript加载xml 并解析各节点的值(实现方法)
2016/10/12 Javascript
Ztree新增角色和编辑角色回显问题的解决
2016/10/25 Javascript
vue2笔记 — vue-router路由懒加载的实现
2017/03/03 Javascript
基于angular实现模拟微信小程序swiper组件
2017/06/11 Javascript
javascript基本常用排序算法解析
2017/09/27 Javascript
Vue移动端右滑屏幕返回上一页附源码下载
2019/06/26 Javascript
解决webpack多页面内存溢出的方法示例
2019/10/08 Javascript
Python爬虫框架Scrapy安装使用步骤
2014/04/01 Python
用Python的Django框架完成视频处理任务的教程
2015/04/02 Python
Python中如何获取类属性的列表
2016/12/26 Python
python 获取键盘输入,同时有超时的功能示例
2018/11/13 Python
python爬虫超时的处理的实例
2018/12/19 Python
使用Python做定时任务及时了解互联网动态
2019/05/15 Python
python多进程并行代码实例
2019/09/30 Python
opencv3/C++实现视频背景去除建模(BSM)
2019/12/11 Python
Python requests模块安装及使用教程图解
2020/06/30 Python
HTML5 层的叠加的实现
2020/07/07 HTML / CSS
法国和欧洲海边和滑雪度假:Pierre & Vacances
2017/01/04 全球购物
美国餐厅用品和厨房设备批发网站:KaTom Restaurant Supply
2018/01/27 全球购物
公司承诺书怎么写
2014/05/24 职场文书
2015年个人实习工作总结
2014/12/12 职场文书
2017春节晚会开幕词
2016/03/03 职场文书
Python Pandas数据分析之iloc和loc的用法详解
2021/11/11 Python