限制只能输入数字的实现代码


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);
}

以上这篇限制只能输入数字的实现代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 简单应用示例总结
Aug 09 Javascript
js操作table示例(个人心得)
Nov 29 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
Jan 24 Javascript
js实现拖拽效果
Feb 12 Javascript
javascript文本框内输入文字倒计数的方法
Feb 24 Javascript
jquery实现简单的表单验证
Nov 17 Javascript
xtemplate node.js 的使用方法实例解析
Aug 22 Javascript
详解Angular 4 表单快速入门
Jun 05 Javascript
swiper插件自定义切换箭头按钮
Dec 28 Javascript
微信公众号平台接口开发 菜单管理的实现
Aug 14 Javascript
vue 保留两位小数 不能直接用toFixed(2) 的解决
Aug 07 Javascript
vue中的可拖拽宽度div的实现示例
Apr 08 Vue.js
JavaScript开发Chrome浏览器扩展程序UI的教程
May 16 #Javascript
基于javascript实现最简单的选项卡切换效果
May 16 #Javascript
JavaScript实现页面跳转的方式汇总
May 16 #Javascript
js实现页面跳转的几种方法小结
May 16 #Javascript
WebApi+Bootstrap+KnockoutJs打造单页面程序
May 16 #Javascript
KnockoutJs快速入门教程
May 16 #Javascript
JS学习之表格的排序简单实例
May 16 #Javascript
You might like
php中header跳转使用include包含解决参数丢失问题
2015/05/08 PHP
JQuery从头学起第一讲
2010/07/04 Javascript
javascript执行环境及作用域详解
2016/05/05 Javascript
JavaScript 深层克隆对象详解及实例
2016/11/03 Javascript
BootStrapValidator校验方式
2016/12/19 Javascript
ligerUI---ListBox(列表框可移动的实例)
2017/11/28 Javascript
Vue 实现双向绑定的四种方法
2018/03/16 Javascript
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
2018/12/10 jQuery
jQuery实现的老虎机跑动效果示例
2018/12/29 jQuery
微信小程序实现展示评分结果功能
2019/02/15 Javascript
详解使用React.memo()来优化函数组件的性能
2019/03/19 Javascript
three.js中多线程的使用及性能测试详解
2021/01/07 Javascript
[01:33]一分钟玩转DOTA2第三弹:DOTA2&DotA快捷操作大对比
2014/06/04 DOTA
[55:03]LGD vs EG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
利用Python实现命令行版的火车票查看器
2016/08/05 Python
python使用openpyxl库修改excel表格数据方法
2018/05/03 Python
Window 64位下python3.6.2环境搭建图文教程
2018/09/19 Python
Python3中的最大整数和最大浮点数实例
2019/07/09 Python
django 捕获异常和日志系统过程详解
2019/07/18 Python
pytorch:实现简单的GAN示例(MNIST数据集)
2020/01/10 Python
dpn网络的pytorch实现方式
2020/01/14 Python
详解Pycharm出现out of memory的终极解决方法
2020/03/03 Python
python BeautifulSoup库的安装与使用
2020/12/17 Python
python re.match()用法相关示例
2021/01/27 Python
美国护肤咨询及美容产品电商:Askderm
2017/02/24 全球购物
家庭户外服装:Hawkshead
2017/11/02 全球购物
智能旅行箱:Horizn Studios
2018/04/30 全球购物
类的核心特性有哪些
2014/01/01 面试题
高分子材料与工程专业推荐信
2013/12/01 职场文书
小学生获奖感言范文
2014/02/02 职场文书
就业推荐表自我鉴定
2014/03/21 职场文书
家长会主持词
2014/03/26 职场文书
军训拉歌口号
2014/06/13 职场文书
无私奉献演讲稿
2014/09/04 职场文书
慰问信格式规范
2015/03/23 职场文书
运动会运动员赞词
2015/07/22 职场文书