js實(shí)現(xiàn)模擬銀行卡賬號(hào)輸入顯示效果
本文實(shí)例講述了js實(shí)現(xiàn)模擬銀行卡賬號(hào)輸入顯示效果。分享給大家供大家參考,具體如下:
先來看運(yùn)行效果截圖如下:

在線演示地址如下:
http://demo.jb51.net/js/2015/js-mn-bank-card-input-style-codes/
具體代碼如下:
<script language="javascript" type="text/javascript">
function www_jb51_net (BankNo)
{
if (BankNo.value == "") return;
var account = new String (BankNo.value);
account = account.substring(0,22); /*帳號(hào)的總數(shù), 包括空格在內(nèi) */
if (account.match (".[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{7}") == null)
{
/* 對(duì)照格式 */
if (account.match (".[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{7}|" + ".[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{7}|" +
".[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{7}|" + ".[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{7}") == null)
{
var accountNumeric = accountChar = "", i;
for (i=0;i<account.length;i++)
{
accountChar = account.substr (i,1);
if (!isNaN (accountChar) && (accountChar != " ")) accountNumeric = accountNumeric + accountChar;
}
account = "";
for (i=0;i<accountNumeric.length;i++)
{ /* 可將以下空格改為-,效果也不錯(cuò) */
if (i == 4) account = account + "-"; /* 帳號(hào)第四位數(shù)后加空格 */
if (i == 8) account = account + "-"; /* 帳號(hào)第八位數(shù)后加空格 */
if (i == 12) account = account + "-";/* 帳號(hào)第十二位后數(shù)后加空格 */
account = account + accountNumeric.substr (i,1)
}
}
}
else
{
account = " " + account.substring (1,5) + " " + account.substring (6,10) + " " + account.substring (14,18) + "-" + account.substring(18,25);
}
if (account != BankNo.value) BankNo.value = account;
}
function checkBankNo (BankNo)
{
if (BankNo.value == "") return;
if (BankNo.value.match (".[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{7}") == null)
{
if (BankNo.value.match ("[0-9]{19}") != null)
www_jb51_net (BankNo)
}}
function checkEnterForFindListing(e){
var characterCode;
if(e && e.which){
e = e;
characterCode = e.which ;
}
else{
e = event;
characterCode = e.keyCode;
}
if(characterCode == 22){
document.forms[getNetuiTagName("findListingForm")].submit();
return false;
}
else{
return true ;
}}
</script>
只能輸入數(shù)字,并且每輸入4位數(shù)字會(huì)增加一個(gè) - <br />
<input type="text" value="" size="25" onkeyup="www_jb51_net(this)" onkeydown="www_jb51_net(this)" name="account" id="account">
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- js jquery驗(yàn)證銀行卡號(hào)信息正則學(xué)習(xí)
- JavaScript中校驗(yàn)銀行卡號(hào)的實(shí)現(xiàn)代碼
- JS使用正則控制用戶輸入銀行卡號(hào)及格式化
- JS代碼隨機(jī)生成姓名、手機(jī)號(hào)、身份證號(hào)、銀行卡號(hào)
- js格式化輸入框內(nèi)金額、銀行卡號(hào)
- JS填寫銀行卡號(hào)每隔4位數(shù)字加一個(gè)空格
- 解決javascript 全局變量失效的問題
- js手機(jī)號(hào)4位顯示空格,銀行卡每4位顯示空格效果
- nodejs利用http模塊實(shí)現(xiàn)銀行卡所屬銀行查詢和騷擾電話驗(yàn)證示例
- JS實(shí)現(xiàn)的獲取銀行卡號(hào)歸屬地及銀行卡類型操作示例
相關(guān)文章
javascript實(shí)現(xiàn)全局匹配并替換的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)全局匹配并替換的方法的總結(jié),十分的簡(jiǎn)單實(shí)用,有需要的小伙伴可以參考下。2015-04-04
JS交互點(diǎn)擊WKWebView中的圖片實(shí)現(xiàn)預(yù)覽效果
這篇文章主要介紹了JS交互點(diǎn)擊WKWebView中的圖片實(shí)現(xiàn)預(yù)覽效果,需要的朋友可以參考下2018-01-01
echarts自定義餅圖數(shù)據(jù)刷新和顏色渲染問題淺析
這篇文章主要給大家介紹了關(guān)于echarts自定義餅圖數(shù)據(jù)刷新和顏色渲染問題的相關(guān)資料,內(nèi)容簡(jiǎn)明扼要并且容易理解,絕對(duì)能使你眼前一亮,需要的朋友可以參考下2023-05-05
使用JavaScript實(shí)現(xiàn)輪播圖效果完整實(shí)例
我們?cè)诟鞣N網(wǎng)頁(yè)中經(jīng)常見到輪播圖的效果,下面這篇文章主要給大家介紹了關(guān)于使用JavaScript實(shí)現(xiàn)輪播圖效果的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
微信公眾平臺(tái)獲取access_token的方法步驟
這篇文章主要介紹了微信公眾平臺(tái)獲取access_token的方法步驟,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03

