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


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 相关文章推荐
ExtJS GTGrid 简单用户管理
Jul 01 Javascript
JavaScript 组件之旅(一)分析和设计
Oct 28 Javascript
jquery实现checkbox全选全不选的简单实例
Dec 31 Javascript
一些老手都不一定知道的JavaScript技巧
May 06 Javascript
Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式
Jun 24 Javascript
javascript模拟评分控件实现方法
May 13 Javascript
jQuery实现图片渐入渐出切换展示效果
Aug 15 Javascript
jQuery垂直多级导航菜单代码分享
Aug 18 Javascript
jQuery鼠标事件汇总
Aug 30 Javascript
js将table的每个td的内容自动赋值给其title属性的方法
Oct 13 Javascript
js实现rem自动匹配计算font-size的示例
Nov 18 Javascript
VUE基于NUXT的SSR 服务端渲染
Nov 30 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
Views rows style模板重写代码
2011/05/16 PHP
mac下使用brew配置环境的步骤分享
2011/05/23 PHP
php学习之数据类型之间的转换代码
2011/05/29 PHP
新浪微博API开发简介之用户授权(PHP基础篇)
2011/09/25 PHP
PHP中__get()和__set()的用法实例详解
2013/06/04 PHP
php输出xml必须header的解决方法
2014/10/17 PHP
PHP的cURL库简介及使用示例
2015/02/06 PHP
ajax 缓存 问题 requestheader
2010/08/01 Javascript
基于jquery的15款幻灯片插件
2011/04/10 Javascript
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
2012/03/16 Javascript
引用外部脚本时script标签关闭的写法
2014/01/20 Javascript
javascript结合ajax读取txt文件内容
2014/12/05 Javascript
js实现顶部可折叠的菜单工具栏效果实例
2015/05/09 Javascript
Javascript实现单例模式
2016/01/24 Javascript
jQuery.deferred对象使用详解
2016/03/18 Javascript
jquery实现一个简单的表单验证实例
2016/03/30 Javascript
js多个物体运动功能实例分析
2016/12/20 Javascript
Vue项目webpack打包部署到服务器的实例详解
2017/07/17 Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
2019/02/22 Javascript
微信小程序常见页面跳转操作简单示例
2019/05/01 Javascript
多个vue子路由文件自动化合并的方法
2019/09/03 Javascript
解决vue项目,npm run build后,报路径错的问题
2020/08/13 Javascript
javascript实现贪吃蛇游戏(娱乐版)
2020/08/17 Javascript
el-form 多层级表单的实现示例
2020/09/10 Javascript
JS实现点击掉落特效
2021/01/29 Javascript
python查找第k小元素代码分享
2013/12/18 Python
Python中enumerate函数代码解析
2017/10/31 Python
nohup后台启动Python脚本,log不刷新的解决方法
2019/01/14 Python
详解Python对JSON中的特殊类型进行Encoder
2019/07/15 Python
Pycharm创建项目时如何自动添加头部信息
2019/11/14 Python
PyTorch实现ResNet50、ResNet101和ResNet152示例
2020/01/14 Python
python爬虫看看虎牙女主播中谁最“顶”步骤详解
2020/12/01 Python
企业文明单位申报材料
2014/05/16 职场文书
主要负责人任命书
2014/06/06 职场文书
信息技术课教学反思
2016/02/23 职场文书
vue+springboot实现登录验证码
2021/05/27 Vue.js