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


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之你需要了解的几本书
May 19 Javascript
浅析node.js中close事件
Nov 26 Javascript
js判断文本框剩余可输入字数的方法
Feb 04 Javascript
javascript判断图片是否加载完成的方法推荐
May 13 Javascript
js关于getImageData跨域问题的解决方法
Oct 14 Javascript
Bootstrap基本组件学习笔记之面板(14)
Dec 08 Javascript
JavaScript实现隐藏省略文字效果的方法
Apr 27 Javascript
Vue.js中的computed工作原理
Mar 22 Javascript
利用Electron简单撸一个Markdown编辑器的方法
Jun 10 Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
Aug 29 Javascript
Vue中import from的来源及省略后缀与加载文件夹问题
Feb 09 Javascript
教你使用vscode 搭建react-native开发环境
Jul 07 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 Smarty 字符比较代码
2011/02/27 PHP
php数组(array)输出的三种形式详解
2013/06/05 PHP
图解找出PHP配置文件php.ini的路径的方法
2014/08/20 PHP
php中的异常和错误浅析
2017/05/03 PHP
jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
2011/01/19 Javascript
setInterval与clearInterval的使用示例代码
2014/01/28 Javascript
Javascript判断文件是否存在(客户端/服务器端)
2014/09/16 Javascript
JavaScript中的条件判断语句使用详解
2015/06/03 Javascript
详解Angular2中的编程对象Observable
2016/09/17 Javascript
Angularjs手动解析表达式($parse)
2016/10/12 Javascript
js获取地址栏中传递的参数(两种方法)
2017/02/08 Javascript
jquery与js实现全选功能的区别
2017/06/11 jQuery
利用ECharts.js画K线图的方法示例
2018/01/10 Javascript
在 Typescript 中使用可被复用的 Vue Mixin功能
2018/04/17 Javascript
Vue核心概念Action的总结
2019/01/18 Javascript
Nodejs实现的操作MongoDB数据库功能完整示例
2019/02/02 NodeJs
jquery实现动态改变css样式的方法分析
2019/05/27 jQuery
浅谈一个webpack构建速度优化误区
2019/06/24 Javascript
layui table 表格模板按钮的实例代码
2019/09/21 Javascript
微信小程序制作扭蛋机代码实例
2019/09/24 Javascript
基于Vue CSR的微前端实现方案实践
2020/05/27 Javascript
跟老齐学Python之做一个小游戏
2014/09/28 Python
Python实现抓取HTML网页并以PDF文件形式保存的方法
2018/05/08 Python
解决python便携版无法直接运行py文件的问题
2020/09/01 Python
ProBikeKit美国官网:自行车套件,跑步和铁人三项套件
2016/10/13 全球购物
StubHub哥伦比亚:购买和出售您的门票
2016/10/20 全球购物
SkinCeuticals官网:美国药妆品牌
2018/04/19 全球购物
网上卖盒饭创业计划书范文
2014/02/07 职场文书
高中军训感言800字
2014/03/05 职场文书
会计自荐信范文
2014/03/09 职场文书
水毁工程实施方案
2014/04/01 职场文书
关于运动会广播稿300字
2014/10/05 职场文书
师德标兵事迹材料
2014/12/19 职场文书
考生诚信考试承诺书(2016版)
2016/03/25 职场文书
python 如何执行控制台命令与操作剪切板
2021/05/20 Python
业余无线电通联Q语
2022/02/18 无线电