JavaScript使用键盘输入控制实现数字验证功能

现在有一个需求如下图:

产品经理说Card Number只能让输入数字(中间的空格是格式自加的,也是用js实现的),有时候我脑海中出现了个声音,啥玩意,加个type=number不就行了,事实发现图样图森破了,先不说type=number后面会有个上下标(虽然用css可干掉),但是这个类型是支持科学输入法的,就是小数点和e这样的是可以输入的,于是乎只能用其他的方式了,后来想用检索到输入了非数字就干掉,但是这样还是能输入,想法被打回,于是乎最终采用了键盘输入控制的办法,其实很简单,代码如下:

  var isNumber=function(keyCode){
        // 数字
        if (keyCode >= 48 && keyCode <= 57) {
          return true;
        }
          // 小数字键盘
        if (keyCode >= 96 && keyCode <= 105) {
          return true;
        }
          //tab Backspace, del, 左右方向键
        if (keyCode == 9||keyCode == 8|| keyCode == 32 || keyCode == 46 || keyCode == 37 || keyCode == 39) {
          return true;
        }
        return false
      }

所谓键盘输入控制就是根据键盘输入的keycode来判断输入的是什么类型,即获取按下的键盘按键Unicode值,键盘上每个按键对应的keycode是固定的,网上有很多对照表,我这里就不贴上去了,每一次按键监测到对应的keycode然后对照是否合法,需要注意的是这里合法的不仅是数字,还有上下左右tab和空格方向键,不能禁用用户的操作指令,怎么样,看起来很简单吧。

时间: 2016-08-16

常用的js验证和数据处理总结

前言 在开发web项目的时候,难免遇到各种对网页数据的处理,比如对用户在表单中输入的电话号码.邮箱.金额.身份证号.密码长度和复杂程度等等的验证,以及对后台返回 数据的格式化比如金额,返回的值为null,还有对指定日期之前或之后某一天或某一月的计算. 下面是给大家总结的一些在工作中常用到的js,有需要的可以参考学习. /** * 验证密码复杂度(必须包含数字字母) * @param str * @returns true:满足规则,false:不满足 */ function validateSt

JS正则表达式匹配检测各种数值类型(数字验证)

验证数字的正则表达式集 验证数字:^[0-9]*$ 验证n位的数字:^\d{n}$ 验证至少n位数字:^\d{n,}$ 验证m-n位的数字:^\d{m,n}$ 验证零和非零开头的数字:^(0|[1-9][0-9]*)$ 验证有两位小数的正实数:^[0-9]+(.[0-9]{2})?$ 验证有1-3位小数的正实数:^[0-9]+(.[0-9]{1,3})?$ 验证非零的正整数:^\+?[1-9][0-9]*$ 验证非零的负整数:^\-[1-9][0-9]*$ 验证非负整数(正整数 + 0) ^\d

javascript数字验证的实例代码(推荐)

现在有一个需求如下图: 产品经理说Card Number只能让输入数字(中间的空格是格式自加的,也是用js实现的),有时候我脑海中出现了个声音,啥玩意,加个type=number不就行了,事实发现图样图森破了,先不说type=number后面会有个上下标(虽然用css可干掉),但是这个类型是支持科学输入法的,就是小数点和e这样的是可以输入的,于是乎只能用其他的方式了,后来想用检索到输入了非数字就干掉,但是这样还是能输入,想法被打回,于是乎最终采用了键盘输入控制的办法,其实很简单, 代码如下: v

js验证真实姓名与身份证号,手机号的简单实例

最近的项目中用的需要调用实名认证的接口,实名认证接口价格相比短信而言高了不是几分钱,所以说调用实名认证的条件就要严格把关,因此用到js验证真实姓名与js验证身份证号. 进入正题 1.js验证真实姓名 js验证真实姓名,是用的unicode字符的来进行匹配,而中国人的姓名长度一般都是2-4,所以重复匹配{2,4}次 var regName =/^[\u4e00-\u9fa5]{2,4}$/; if(!regName.test(name)){ alert('真实姓名填写有误'); return fa

两行代码轻松搞定JavaScript日期验证

我们通常在 JavaScript 中验证日期,基本的思路大概是,先判断年月日是否有效,再判断当月是否有当日,比如一些月份没有 31 日,平年二月没有 29.30 日,闰年二月没有 30 日等等. 偶然间发现一个技巧,能判断以上所有的情况.除去赋值代码,实际代码仅两行. 其实这个技巧也很简单,通过实例化 Date 对象来生成一个合法的日期,再去对比年月日是否相等,以验证日期是否合法. var originalYear = 2016; var originalMonth = 12; var orig

JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版

前天熬了大半宿发了一篇[一行代码轻松搞定快捷留言功能],同时发布了V1.0beta版的快捷留言功能和源代码,之所以是beta版,就是当时感觉虽然基本功能有了,但是还不够完善,特性也不一定合理,今天不知不觉又弄到了这个时候,这次对上一版做了很大改进: 首先,原来自动提交留言信息的同时会自动推荐,大量的推荐数,直接影响了博客园的推荐排名机制,所以后来在第一时间修改成了询问是否要推荐的交互模式! 其次,虽然快捷功能有了,并且很好用,但是满屏幕的"好贴!我顶你!"也确实有些审美疲劳了,并且没什

网站被恶意镜像怎么办 php一段代码轻松搞定(全面版)

有时候你会发现,你在搜索引擎输入网站名称的时候,出来的网站信息是你们的,但是域名却是一个陌生的,这种情况可以基本确定网站被镜像了,那么究竟什么叫网站被镜像? 恶意镜像,也叫恶意克隆,恶意解析,是指有人通过域名 A 记录直接解析别人 IP 地址,从而得到一个在访问者眼中完全相同网站的过程.其工作原理基本上是这样子的:有用户访问镜像站点时,程序就会来正版的站点查询数据,并修改相关链接然后呈献给用户,实质上还是在读取原站的数据.严谨一点的解释:通过复制整个网站或部分网页内容并分配以不同域名和服务器,以

几行代码轻松搞定jquery实现flash8类似的连接效果

很简单几行代码就可以实现整个页面的连接效果.  复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head&g

只需五句话搞定JavaScript作用域(经典)

JavaScript的作用域一直以来是前端开发中比较难以理解的知识点,对于JavaScript的作用域主要记住几句话,走遍天下都不怕... 一."JavaScript中无块级作用域" 在Java或C#中存在块级作用域,即:大括号也是一个作用域. public static void main () { if(1==1){ String name = "seven"; } System.out.println(name); }// 报错 public static v

一篇文章搞定JavaScript类型转换(面试常见)

为啥要说这个东西?一道面试题就给我去说它的动机. 题如下: var bool = new Boolean(false); if (bool) { alert('true'); } else { alert('false'); } 运行结果是true!!! 其实啥类型转换啊,操作符优先级啊,这些东西都是最最基本的.犀牛书上有详细的介绍.但我很少去翻犀牛书的前5章... 比如说优先级那块儿,很多书都教育我们,"不用去背诵优先级顺序,不确定的话,加括号就行了."平常我们写代码时也确实这么做的

1个文件如何轻松搞定Asp.net core 3.1动态页面转静态页面

前言 最近一个Asp.net core项目需要静态化页面,百度查找了一下,没有发现合适的.原因如下 配置麻烦. 类库引用了第三方类,修改起来麻烦. 有只支持MVC,不支持PageModel. 继承ActionFilterAttribute类,只重写了OnActionExecutionAsync,看似静态化了,其实运行时该查数据库还是查数据库,没有真正静态化. 缺少灵活性,没有在线更新静态文件方法,不能测试查看实时页面,没有进行Html压缩,没有使用gzip.br压缩文件. 于是我开始了页面静态化

轻松搞定iOS远程消息推送

一.引言 IOS中消息的推送有两种方式,分别是本地推送和远程推送,本地推送在http://www.jb51.net/article/93602.htm这篇博客中有详细的介绍,这里主要讨论远程推送的流程与配置过程. 二.远程推送机制的原理 1.从一张很火的图说起 搜索IOS远程推送,你总能看到一张如下的流程示意图,因为这张图确实很火,所以我也将它引用在此: 这张图示意的很清晰,大致意思是这样:你的应用服务端将消息发送到apple的APNS服务器,APNS服务器将消息推送到指定的Iphone,最后由

js两行代码按指定格式输出日期时间

复制代码 代码如下: // <summary> // 格式化显示日期时间 // </summary> // <param name="x">待显示的日期时间,例如new Date()</param> // <param name="y">需要显示的格式,例如yyyy-MM-dd hh:mm:ss</param> function date2str(x,y) { var z ={y:x.getFu

要用最新驱动 四步就可以轻松搞定

不同设备.同一设备的不同型号,还有不同的操作系统所对应的驱动程序是不同的,即使是同一个驱动程序也有多个不同版本.一旦为硬件安装了错误的驱动程序,后果可想而知.因此,安全.及时地更新驱动相对来说还是有一定难度的.现在,有了"驱动精灵2004",可以很快帮助我们搞定,让我们的硬件驱动永远保持最新!驱动更新不用愁,我有精灵做帮手. 第一步:查找/下载更新驱动 先下载.安装并启动"驱动精灵2004",该软件会自动搜集系统中硬件的驱动信息,并联机到服务器检查有无相关硬件的驱动