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


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 去掉空格实例 Trim() LTrim() RTrim()
Jan 07 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
Jun 01 Javascript
js实现异步循环实现代码
Feb 16 Javascript
轻松掌握JavaScript策略模式
Aug 25 Javascript
jQuery删除节点用法示例(remove方法)
Sep 08 Javascript
关于JavaScript和jQuery的类型判断详解
Oct 08 Javascript
Javascript 制作图形验证码实例详解
Dec 22 Javascript
jQuery简单获取DIV和A标签元素位置的方法
Feb 07 Javascript
vue过渡和animate.css结合使用详解
Jun 14 Javascript
微信小程序实现传参数的几种方法示例
Jan 10 Javascript
微信小程序表单验证form提交错误提示效果
Jun 19 Javascript
微信小程序点击item使之滚动到屏幕中间位置
Mar 25 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 友好URL的实现(吐血推荐)
2008/10/04 PHP
PHP获取当前文件所在目录 getcwd()函数
2009/05/13 PHP
发款php蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
PHP循环函数使用介绍之PHP基础入门教程
2013/09/21 PHP
YII2.0之Activeform表单组件用法实例
2016/01/09 PHP
php基于PDO连接MSSQL示例DEMO
2016/07/13 PHP
一些常用的Javascript函数
2006/12/22 Javascript
jQuery 使用手册(七)
2009/09/23 Javascript
Javascript面向对象编程
2012/03/18 Javascript
JavaScript初学者建议:不要去管浏览器兼容
2014/02/04 Javascript
JavaScript取得WEB安全颜色列表的方法
2015/07/14 Javascript
基于jQuery实现交互体验社会化分享代码附源码下载
2016/01/04 Javascript
微信小程序(三):网络请求
2017/01/13 Javascript
jquery实现拖动效果(代码分享)
2017/01/25 Javascript
原生JS实现图片翻书效果
2017/02/16 Javascript
详解React-Native全球化多语言切换工具库react-native-i18n
2017/11/03 Javascript
微信小程序如何获取openid及用户信息
2018/01/26 Javascript
JS实现面向对象继承的5种方式分析
2018/07/21 Javascript
python实现文件名批量替换和内容替换
2014/03/20 Python
Python进阶之尾递归的用法实例
2018/01/31 Python
Python3.7中安装openCV库的方法
2018/07/11 Python
python安装requests库的实例代码
2019/06/25 Python
使用python实现多维数据降维操作
2020/02/24 Python
Python爬虫工具requests-html使用解析
2020/04/29 Python
深入了解Python装饰器的高级用法
2020/08/13 Python
如何用python实现一个HTTP连接池
2021/01/14 Python
pip install命令安装扩展库整理
2021/03/02 Python
英国和世界各地鲜花速递专家:Arena Flowers
2018/02/10 全球购物
系统管理员的职责包括那些?管理的对象是什么?
2016/09/20 面试题
公司市场专员岗位职责
2014/06/29 职场文书
2015年行政工作总结范文
2015/04/09 职场文书
英文诗歌翻译方法(赏析)
2019/08/16 职场文书
vue实现移动端div拖动效果
2022/03/03 Vue.js
Python集合set()使用的方法详解
2022/03/18 Python
Mybatis-Plus进阶分页与乐观锁插件及通用枚举和多数据源详解
2022/03/21 Java/Android
Python按顺序遍历并读取文件夹中文件
2022/04/29 Python