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

 更新时间:2016年05月16日 16:07:15   投稿:jingxian  
下面小编就为大家带来一篇限制只能输入数字的实现代码。小编觉得挺不错的,现在分享给大家,也给大家做个参考,一起跟随小编过来看看吧

当我们在一些网站注册账号、填写信息是,不小心将电话号码填写成汉字或其他英文字母了,这显然是不正确的。为了帮助用户更好地纠正输入时的错误,在表单中填写信息时,需要限制手机号、邮编、电话号码这类文本框不能输入其他字符,只能是数字。

通过使用正则匹配输入的时候只是数字:

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);
}

以上这篇限制只能输入数字的实现代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 详解webpack+express多页站点开发

    详解webpack+express多页站点开发

    这篇文章主要介绍了详解webpack+express多页站点开发
    2017-12-12
  • 为什么JavaScript中0.1 + 0.2 != 0.3

    为什么JavaScript中0.1 + 0.2 != 0.3

    这篇文章主要给大家介绍了关于为什么JavaScript中0.1 + 0.2 != 0.3的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • KnockoutJS 3.X API 第四章之事件event绑定

    KnockoutJS 3.X API 第四章之事件event绑定

    event绑定即为事件绑定,即当触发相关DOM事件的时候回调函数,这篇文章主要介绍了KnockoutJS 3.X API 第四章之事件event绑定的相关知识,感兴趣的朋友一起看看吧
    2016-10-10
  • 纯JS实现表单验证实例

    纯JS实现表单验证实例

    这篇文章主要介绍了纯JS实现表单验证实例,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-12-12
  • 微信小程序实现点击图片放大预览

    微信小程序实现点击图片放大预览

    这篇文章主要为大家详细介绍了小程序实现点击图片放大预览功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-10-10
  • 利用Three.js绘制酷炫的三角形

    利用Three.js绘制酷炫的三角形

    这篇文章主要为大家详细介绍了如何利用Three.js中的BufferGeometry绘制酷炫的三角形,文中的示例代码讲解详细,感兴趣的可以尝试一下
    2022-12-12
  • bootstrap模态框垂直居中效果

    bootstrap模态框垂直居中效果

    这篇文章主要为大家详细介绍了bootstrap模态框垂直居中效果的实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • jquery动态添加删除(tr/td)

    jquery动态添加删除(tr/td)

    这篇文章主要介绍了jquery动态添加删除(tr/td)的方法,需要的朋友可以参考下
    2015-02-02
  • JavaScript实现动态数字时钟

    JavaScript实现动态数字时钟

    这篇文章主要为大家详细介绍了JavaScript实现动态数字时钟,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-05-05
  • 用roll.js实现的图片自动滚动+鼠标触动的特效

    用roll.js实现的图片自动滚动+鼠标触动的特效

    用roll.js实现的图片自动滚动+鼠标触动的特效...
    2007-03-03

最新评论