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


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 相关文章推荐
javascript数组快速打乱重排的方法
Jan 02 Javascript
使用js实现关闭js弹出层的窗口
Feb 10 Javascript
js操纵dom生成下拉列表框的方法
Feb 24 Javascript
JavaScript实现的简单幂函数实例
Apr 17 Javascript
轻松实现js图片预览功能
Jan 18 Javascript
浅谈jQuery双事件多重加载的问题
Oct 05 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
Nov 18 Javascript
AngularJS实践之使用ng-repeat中$index的注意点
Dec 22 Javascript
探索webpack模块及webpack3新特性
Sep 18 Javascript
JS代码触发事件代码实例
Jan 02 Javascript
JavaScript设计模式之观察者模式与发布订阅模式详解
May 07 Javascript
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
Aug 19 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
用PHP和ACCESS写聊天室(九)
2006/10/09 PHP
如何使用PHP实现javascript的escape和unescape函数
2013/06/29 PHP
PHP实现多图片上传类实例
2014/07/26 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
JavaScript 全面解析各种浏览器网页中的JS 执行顺序
2009/02/17 Javascript
基于Jquery制作的幻灯片图集效果打包下载
2011/02/12 Javascript
jQuery 联动日历实现代码
2012/05/31 Javascript
Ext JS 4官方文档之三 -- 类体系概述与实践
2012/12/16 Javascript
JQuery for与each性能比较分析
2013/05/14 Javascript
JS自调用匿名函数具体实现
2014/02/11 Javascript
Angular中的Promise对象($q介绍)
2015/03/03 Javascript
jQuery实现dialog设置focus焦点的方法
2015/06/10 Javascript
Node.js模块封装及使用方法
2016/03/06 Javascript
浅析Nodejs npm常用命令
2016/06/14 NodeJs
vue-cli+webpack记事本项目创建
2017/04/01 Javascript
jQuery实现简单的手风琴效果
2020/04/17 jQuery
详解在vue-cli项目中安装node-sass
2017/06/21 Javascript
对Vue.js之事件的绑定(v-on: 或者 @ )详解
2018/09/15 Javascript
浏览器事件循环与vue nextTicket的实现
2019/04/16 Javascript
解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
2019/10/27 Javascript
vue中 数字相加为字串转化为数值的例子
2019/11/07 Javascript
Python Flask-web表单使用详解
2017/11/18 Python
python PyTorch参数初始化和Finetune
2018/02/11 Python
Python检查ping终端的方法
2019/01/26 Python
django将数组传递给前台模板的方法
2019/08/06 Python
Python调用ffmpeg开源视频处理库,批量处理视频
2020/11/16 Python
主管职责范文
2013/11/09 职场文书
金融专业个人求职信范文
2013/11/28 职场文书
毕业生护理专业个人求职信范文
2014/01/04 职场文书
继承公证书样本
2014/04/04 职场文书
2014年最新领导班子整改方案
2014/09/27 职场文书
2016教师读书思廉心得体会
2016/01/23 职场文书
公司开业的祝贺语大全(60条)
2019/07/05 职场文书
redis实现共同好友的思路详解
2021/05/26 Redis
jupyter notebook保存文件默认路径更改方法汇总(亲测可以)
2021/06/09 Python
laravel添加角色和模糊搜索功能的实现代码
2021/06/22 PHP