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


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 相关文章推荐
MSN消息提示类
Sep 05 Javascript
JavaScript高级程序设计(第3版)学习笔记11 内建js对象
Oct 11 Javascript
javascript 日期时间 转换的方法
Feb 21 Javascript
JS 加入收藏夹的代码(主流浏览器通用)
May 13 Javascript
禁用页面部分JavaScript方法的具体实现
Jul 31 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
Aug 12 Javascript
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
Nov 22 Javascript
js函数参数设置默认值的一种变通实现方法
May 26 Javascript
Javascript单例模式的介绍和实例
Oct 08 Javascript
HTML5实现微信拍摄上传照片功能
Apr 21 Javascript
swiper插件自定义切换箭头按钮
Dec 28 Javascript
JavaScript实现通讯录功能
Dec 27 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
jQuery 源码分析笔记
2011/05/25 PHP
Zend的MVC机制使用分析(一)
2013/05/02 PHP
PHP扩展模块Pecl、Pear以及Perl的区别
2014/04/09 PHP
php上传图片生成缩略图(GD库)
2016/01/06 PHP
WordPress的文章自动添加关键词及关键词的SEO优化
2016/03/01 PHP
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
2010/05/06 Javascript
jQuery Tools tab使用介绍
2012/07/14 Javascript
jQuery.buildFragment使用方法及思路分析
2013/01/07 Javascript
IE、FF浏览器下修改标签透明度
2014/01/28 Javascript
Jquery实现自定义tooltip示例代码
2014/02/12 Javascript
100个不能错过的实用JS自定义函数
2014/03/05 Javascript
jQuery的$.proxy()应用示例介绍
2014/04/03 Javascript
JS实现两表格里数据来回转移的方法
2015/05/28 Javascript
JavaScript易错知识点整理
2016/12/05 Javascript
JavaScript中数据类型转换总结
2016/12/25 Javascript
Vuejs 组件——props数据传递的实例代码
2017/03/07 Javascript
JS+DIV实现的卷帘效果示例
2017/03/22 Javascript
详解在vue-cli项目中使用mockjs(请求数据删除数据)
2017/10/23 Javascript
vue-star评星组件开发实例
2018/03/01 Javascript
如何用webpack4带你实现一个vue的打包的项目
2018/06/20 Javascript
layui表格 返回的数据状态异常的解决方法
2019/09/10 Javascript
[59:36]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第二场
2018/04/04 DOTA
python读取word文档的方法
2015/05/09 Python
python线程、进程和协程详解
2016/07/19 Python
各种Python库安装包下载地址与安装过程详细介绍(Windows版)
2016/11/02 Python
Django 框架模型操作入门教程
2019/11/05 Python
Python Spyder 调出缩进对齐线的操作
2021/02/26 Python
在线学习西班牙语、法语或其他语言:Babbel.com
2018/02/07 全球购物
会计专业自我鉴定范文
2013/10/06 职场文书
大学毕业生通用自荐信范文
2013/10/31 职场文书
财务工作者先进事迹材料
2014/01/17 职场文书
参观考察邀请函范文
2014/01/29 职场文书
委托书模板
2014/04/04 职场文书
家长通知书教师评语
2014/04/17 职场文书
vue实现拖拽交换位置
2022/04/07 Vue.js
实战Python爬虫爬取酷我音乐
2022/04/11 Python