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


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利用Array.splice实现Array的insert/remove
Jan 13 Javascript
Javascript合并表格中具有相同内容单元格示例
Aug 11 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
Jan 03 Javascript
EasyUI中datagrid在ie下reload失败解决方案
Mar 09 Javascript
JavaScript中Null与Undefined的区别解析
Jun 30 Javascript
JS代码随机生成姓名、手机号、身份证号、银行卡号
Apr 27 Javascript
微信小程序 前端源码逻辑和工作流详解
Oct 08 Javascript
JS+Canvas实现的俄罗斯方块游戏完整实例
Dec 12 Javascript
JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
Apr 24 Javascript
微信小程序网络层封装的实现(promise, 登录锁)
May 08 Javascript
vant组件中 dialog的确认按钮的回调事件操作
Nov 04 Javascript
JS原生实现轮播图的几种方法
Mar 23 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之第六天
2006/10/09 PHP
PHP常用的排序和查找算法
2015/08/06 PHP
PHP简单遍历对象示例
2016/09/28 PHP
Yii2框架视图(View)操作及Layout的使用方法分析
2019/05/27 PHP
js客户端快捷键管理类的较完整实现和应用
2010/06/08 Javascript
window.onresize 多次触发的解决方法
2013/11/08 Javascript
js快速排序的实现代码
2013/12/08 Javascript
jQuery实现下拉框左右选择的简单实例
2014/02/22 Javascript
nodejs入门教程三:调用内部和外部方法示例
2017/04/24 NodeJs
基于AngularJS实现的工资计算器实例
2017/06/16 Javascript
JS自定义滚动条效果简单实现代码
2020/10/27 Javascript
Node接收电子邮件的实例代码
2017/07/21 Javascript
react高阶组件经典应用之权限控制详解
2017/09/07 Javascript
如何在vue 中引入使用jquery
2020/11/10 jQuery
[01:25]2014DOTA2国际邀请赛 zhou分析LGD比赛情况
2014/07/14 DOTA
在Python中操作字符串之rstrip()方法的使用
2015/05/19 Python
详解Python使用simplejson模块解析JSON的方法
2016/03/24 Python
利用python3随机生成中文字符的实现方法
2017/11/24 Python
使用Python+Splinter自动刷新抢12306火车票
2018/01/03 Python
python遍历文件夹下所有excel文件
2018/01/03 Python
python实现图片彩色转化为素描
2019/01/15 Python
对Python3中列表乘以某一个数的示例详解
2019/07/20 Python
Python获取浏览器窗口句柄过程解析
2020/07/25 Python
Ratchet 模态框的实现
2020/08/19 HTML / CSS
纽约的奢华内衣店:Journelle
2016/07/29 全球购物
违反工作纪律检讨书
2014/02/15 职场文书
求职意向书范文
2014/04/01 职场文书
小学校园文化建设汇报材料
2014/08/19 职场文书
法院干警四风问题自我剖析材料
2014/09/29 职场文书
工商管理专业毕业生自我鉴定2014
2014/10/04 职场文书
民主评议党员总结
2014/10/20 职场文书
检讨书范文500字
2015/01/28 职场文书
物业项目经理岗位职责
2015/04/01 职场文书
办公室行政主管岗位职责
2015/04/09 职场文书
导游词之台湾阿里山
2019/10/23 职场文书
励志语录:你若不勇敢,谁替你坚强
2019/11/08 职场文书