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


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获得地址栏参数的两种方法
Nov 08 Javascript
学习YUI.Ext基础第一天
Mar 10 Javascript
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
Mar 10 Javascript
iframe 自适应高度[在IE6 IE7 FF下测试通过]
Apr 13 Javascript
jQuery动画效果实现图片无缝连续滚动
Jan 12 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
Feb 25 Javascript
设置点击文本框或图片弹出日历控件的实现代码
May 12 Javascript
微信支付 JS API支付接口详解
Jul 11 Javascript
微信小程序 input输入框控件详解及实例(多种示例)
Dec 14 Javascript
vue.js 获取当前自定义属性值
Jun 01 Javascript
zTree树形插件异步加载方法详解
Jun 14 Javascript
vue获取dom元素注意事项
Dec 28 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 观察者模式的实现代码
2013/05/10 PHP
给WordPress中的留言加上楼层号的PHP代码实例
2015/12/14 PHP
利用PHP绘图函数实现简单验证码功能的方法
2016/10/18 PHP
使用XHProf查找PHP性能瓶颈的实例
2017/12/13 PHP
PHP面向对象五大原则之里氏替换原则(LSP)详解
2018/04/08 PHP
PHP测试框架PHPUnit组织测试操作示例
2018/05/28 PHP
不懂JavaScript应该怎样学
2008/04/16 Javascript
JS 页面自动加载函数(兼容多浏览器)
2009/05/18 Javascript
JavaScript 解析读取XML文档 实例代码
2009/07/07 Javascript
javascript在事件监听方面的兼容性小结
2010/04/07 Javascript
JS等比例缩小图片尺寸的实例
2013/02/27 Javascript
DOM基础教程之使用DOM
2015/01/19 Javascript
jquery中val()方法是从最后一个选项往前读取的
2015/09/06 Javascript
JS限制条件补全问题实例分析
2016/12/16 Javascript
axios基本入门用法教程
2017/03/25 Javascript
微信小程序 实现动态显示和隐藏某个控件
2017/04/27 Javascript
vue 中自定义指令改变data中的值
2017/06/02 Javascript
validationEngine 表单验证插件使用实例代码
2017/06/15 Javascript
原生js的ajax和解决跨域的jsonp(实例讲解)
2017/10/16 Javascript
javascript实现手动点赞效果
2019/04/09 Javascript
javascript设计模式 ? 简单工厂模式原理与应用实例分析
2020/04/09 Javascript
如何在 ant 的table中实现图片的渲染操作
2020/10/28 Javascript
[42:50]NB vs VP 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
详解字典树Trie结构及其Python代码实现
2016/06/03 Python
Python lambda函数基本用法实例分析
2018/03/16 Python
python for循环输入一个矩阵的实例
2018/11/14 Python
python2与python3的print及字符串格式化小结
2018/11/30 Python
Python使用Socket实现简单聊天程序
2020/02/28 Python
matplotlib 生成的图像中无法显示中文字符的解决方法
2020/06/10 Python
python3爬虫中异步协程的用法
2020/07/10 Python
详解HTML5中的picture元素响应式处理图片
2018/01/03 HTML / CSS
北京一家公司的.net开发工程师笔试题
2012/04/17 面试题
大学生毕业求职的自我评价
2013/09/29 职场文书
师范教师大学生职业生涯规划范文
2014/01/05 职场文书
2015年物业管理工作总结
2015/04/23 职场文书
mysql数据库实现设置字段长度
2022/06/10 MySQL