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


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 开天辟地入门篇一
Dec 09 Javascript
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
Oct 11 Javascript
IE浏览器中图片onload事件无效的解决方法
Apr 29 Javascript
jQuery中的编程范式详解
Dec 15 Javascript
详解javascript实现瀑布流绝对式布局
Jan 29 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
Mar 25 Javascript
基于vue的下拉刷新指令和滚动刷新指令
Dec 23 Javascript
jquery select插件异步实时搜索实例代码
Oct 20 jQuery
vue组件挂载到全局方法的示例代码
Aug 02 Javascript
jQuery中$原理实例分析
Aug 13 jQuery
用js简单提供增删改查接口
May 12 Javascript
mpvue实现微信小程序快递单号查询代码
Apr 03 Javascript
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
如何使用Strace调试工具
2013/06/03 PHP
php判断电脑访问、手机访问的例子
2014/05/10 PHP
CentOS6.5 编译安装lnmp环境
2014/12/21 PHP
PHP控制反转(IOC)和依赖注入(DI)
2017/03/13 PHP
php自定义函数实现统计中文字符串长度的方法小结
2017/04/15 PHP
php 读写json文件及修改json的方法
2018/03/07 PHP
PHP array_reduce()函数的应用解析
2018/10/28 PHP
老鱼 浅谈javascript面向对象编程
2010/03/04 Javascript
filters.revealTrans.Transition使用方法小结
2010/08/19 Javascript
document.createElement()用法
2013/03/13 Javascript
javascript中的document.open()方法使用介绍
2013/10/09 Javascript
javascript使用数组的push方法完成快速排序
2014/09/15 Javascript
JavaScript中Math.SQRT2属性的使用详解
2015/06/14 Javascript
node.js中 stream使用教程
2016/08/28 Javascript
Vue2 配置 Axios api 接口调用文件的方法
2017/11/13 Javascript
js动态引入的四种方法
2018/05/05 Javascript
JQuery animate动画应用示例
2019/05/14 jQuery
微信小程序如何调用json数据接口并解析
2019/06/29 Javascript
微信小程序自定义tabBar的踩坑实践记录
2020/11/06 Javascript
[01:20]DOTA2上海特级锦标赛现场采访:谁的ID最受青睐
2016/03/25 DOTA
[49:18]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 OG vs TNC
2018/04/01 DOTA
[39:00]Optic vs VP 2018国际邀请赛淘汰赛BO3 第三场 8.24
2018/08/25 DOTA
[53:10]完美世界DOTA2联赛决赛日 FTD vs GXR 第二场 11.08
2020/11/11 DOTA
使用python绘制二维图形示例
2019/11/22 Python
python中format函数如何使用
2020/06/22 Python
澳大利亚家居用品零售商:Harris Scarfe
2020/10/10 全球购物
银行个人求职自荐信范文
2013/12/16 职场文书
季度思想汇报
2014/01/01 职场文书
红领巾心向党广播稿
2014/01/19 职场文书
优秀德育工作者事迹材料
2014/05/07 职场文书
团队激励口号
2014/06/06 职场文书
公证书格式
2015/01/23 职场文书
食品质检员岗位职责
2015/04/08 职场文书
2016年“七一建党节”广播稿
2015/12/18 职场文书
MySQL基于索引的压力测试的实现
2021/11/07 MySQL
如何利用Python实现n*n螺旋矩阵
2022/01/18 Python