javascript數字驗證

来源:http://www.cnblogs.com/xuechenlei/archive/2016/08/19/5786849.html
-Advertisement-
Play Games

現在有一個需求如下圖: 產品經理說Card Number只能讓輸入數字(中間的空格是格式自加的,也是用js實現的),有時候我腦海中出現了個聲音,啥玩意,加個type=number不就行了,事實發現圖樣圖森破了,先不說type=number後面會有個上下標(雖然用css可幹掉),但是這個類型是支持科學 ...


現在有一個需求如下圖:

產品經理說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和空格方向鍵,不能禁用用戶的操作指令,怎麼樣,看起來很簡單吧。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 標簽頁的切換方式 1、控制tab的顯示與隱藏 2、tab不切換,數據載入 控制tab的顯示與隱藏 前端腳本: 1、jquery實現: 引入jquery文件,代碼簡潔 jquery文件較大,瀏覽器不相容 2、js 實現 無需引入jquery文件代碼量大,需每個標簽添加函數及ID 3、插件實現 無需引入 ...
  • let與塊級作用域 在代碼中,使用var申明的變數在代碼塊外面能被識別,但是let命令卻不能被識別,這樣就實現了js的塊級作用域,我們在使用條件語句 迴圈語句等就會不擔心變數污染的問題了,以下是兩種寫法等對比: es6: es5: 在{}用let聲明的變數只有在{}內是有效的 let不會有變數提升 ...
  • 以下的分享是本人最近幾天學習了margin知識後,大有啟發,感覺以前對margin的瞭解簡直太淺薄。所以寫成以下文章,一是供自己整理思路;二是把知識分享出來,避免各位對margin屬性的誤解。內容可能會有點多,但都是精華,希望大家耐心學習。 以下的分享會分為如下內容: 1.margin 屬性的簡單介 ...
  • 在我電腦屏幕上顯示的 電腦是 1920*1080這是在document.compatMode:css1Compat模式 現在是document.compatMode:BackCompat:頁面沒有!doctype聲明 以上紅色部分就是說document.compatMode模式的區別下的網頁可視區域 ...
  • 定義 JavaScript定義正則表達式有兩種方法。 1.RegExp構造函數 它接收兩個參數:一個是要匹配的字元串模式,另一個是可選的標誌字元串。 2.字面量 正則表達式的匹配模式支持三種標誌字元串: g:global,全局搜索模式,該模式將被應用於所有字元串,而並非搜索到第一個匹配項就停止搜索; ...
  • 插件!插件!天天聽到有人求這個插件,那個插件的,當然,用第三方插件可以大幅提高開發效率,但作為新手,我還是喜歡自己來實現,主要是我有時間! 今天我來給大家分享下用原生JS實現圖片輪播的寫法 前輩們可以無視下麵這段廢話: 在開始之前,先說下我學前端到現在的一點感受。到今天應該有兩個月左右了吧,基本每天 ...
  • 為什麼需要這些?主要是因為this,來看看this乾的好事。 box.onclick = function(){ function fn(){ alert(this); } fn();}; 我們原本以為這裡面的this指向的是box,然而卻是Window。一般我們這樣解決: box.onclick ...
  • 近年來隨著操作系統的升級以及各種新技術的開發普及,拋棄低版本IE已經是大勢所趨,這對於前端人員來時是個好消息,可以不用花費太多的時間來做低版本的相容,很多站點採用給予低版本IE以提示的方式(恩,很友好很人道)給游客,一般是在header上給一個提示,腳本檢測如下: 這裡的重點是使用了jsBOM的na ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...