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


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 相关文章推荐
用js得到网页中所有的div的id
Oct 19 Javascript
js判断生效时间不得大于失效时间的思路及代码
Apr 23 Javascript
jquery 倒计时效果实现秒杀思路
Sep 11 Javascript
JS+CSS实现可以凹陷显示选中单元格的方法
Mar 02 Javascript
JavaScript中的Math.LOG2E属性使用详解
Jun 14 Javascript
Nginx上传文件全部缓存解决方案
Aug 17 Javascript
mvc 、bootstrap 结合分布式图简单实现分页
Oct 10 Javascript
Node.js连接mongodb实例代码
Jun 06 Javascript
浅谈JS中的反柯里化( uncurrying)
Aug 17 Javascript
react-native DatePicker日期选择组件的实现代码
Sep 12 Javascript
详解vue2.0监听属性的使用心得及搭配计算属性的使用
Jul 18 Javascript
实用的 vue tags 创建缓存导航的过程实现
Dec 03 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 对输入信息的进行安全过滤的函数代码
2012/06/29 PHP
codeigniter框架The URI you submitted has disallowed characters错误解决方法
2014/05/06 PHP
PHP7 字符串处理机制修改
2021/03/09 PHP
js用typeof方法判断undefined类型
2014/07/15 Javascript
JQuery插入DOM节点的方法
2015/06/11 Javascript
jquery中ready()函数执行的时机和window的load事件比较
2015/06/22 Javascript
完美实现bootstrap分页查询
2015/12/09 Javascript
JS根据浏览器窗口大小实时动态改变网页文字大小的方法
2016/02/25 Javascript
javascript HTML5 Canvas实现圆盘抽奖功能
2016/04/11 Javascript
JavaScript-html标题滚动效果的简单实现
2016/09/08 Javascript
jQueryUI Datepicker组件设置日期高亮
2016/10/13 Javascript
利用Vue.js实现checkbox的全选反选效果
2017/01/18 Javascript
vue2.0结合DataTable插件实现表格动态刷新的方法详解
2017/03/17 Javascript
使用webpack3.0配置webpack-dev-server教程
2018/05/29 Javascript
angular 用Observable实现异步调用的方法
2018/12/27 Javascript
Angular单元测试之事件触发的实现
2020/01/20 Javascript
vue实现自定义多选按钮
2020/07/16 Javascript
Python实现对PPT文件进行截图操作的方法
2015/04/28 Python
Python实现二叉搜索树
2016/02/03 Python
基于python 字符编码的理解
2017/09/02 Python
Python内置函数delattr的具体用法
2017/11/23 Python
python查看模块安装位置的方法
2018/10/16 Python
django+tornado实现实时查看远程日志的方法
2019/08/12 Python
python爬虫开发之Beautiful Soup模块从安装到详细使用方法与实例
2020/03/09 Python
python判断正负数方式
2020/06/03 Python
python实现按键精灵找色点击功能教程,使用pywin32和Pillow库
2020/06/04 Python
巴西香水和化妆品购物网站:The Beauty Box
2019/09/03 全球购物
Servlet如何得到服务器的信息
2015/12/22 面试题
大学学习生活感言
2014/01/18 职场文书
酒店行政人事部经理职务说明书
2014/02/26 职场文书
务虚会发言材料
2014/12/25 职场文书
JavaScript嵌入百度地图API的最详细方法
2021/04/16 Javascript
Vue3如何理解ref toRef和toRefs的区别
2022/02/18 Vue.js
Python正则表达式中flags参数的实例详解
2022/04/01 Python
Python之matplotlib绘制折线图
2022/04/13 Python
JS轻量级函数式编程实现XDM三
2022/06/16 Javascript