js实现模拟银行卡账号输入显示效果

 更新时间:2015年11月18日 09:30:53   作者:mile  
这篇文章主要介绍了js实现模拟银行卡账号输入显示效果,涉及JavaScript正则匹配与字符串操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了js实现模拟银行卡账号输入显示效果。分享给大家供大家参考,具体如下:

先来看运行效果截图如下:

在线演示地址如下:

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); /*帐号的总数, 包括空格在内 */
if (account.match (".[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{7}") == null)
{
/* 对照格式 */
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++)
{ /* 可将以下空格改为-,效果也不错 */
if (i == 4) account = account + "-"; /* 帐号第四位数后加空格 */
if (i == 8) account = account + "-"; /* 帐号第八位数后加空格 */
if (i == 12) account = account + "-";/* 帐号第十二位后数后加空格 */
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>
只能输入数字,并且每输入4位数字会增加一个 - <br />
<input type="text" value="" size="25" onkeyup="www_jb51_net(this)" onkeydown="www_jb51_net(this)" name="account" id="account">

希望本文所述对大家JavaScript程序设计有所帮助。

相关文章

  • javascript实现全局匹配并替换的方法

    javascript实现全局匹配并替换的方法

    这篇文章主要介绍了javascript实现全局匹配并替换的方法的总结,十分的简单实用,有需要的小伙伴可以参考下。
    2015-04-04
  • 通过说明与示例了解js五种设计模式

    通过说明与示例了解js五种设计模式

    这篇文章主要介绍了通过说明与示例了解js五种设计模式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,,需要的朋友可以参考下
    2019-06-06
  • Postman内建变量常用方法实例解析

    Postman内建变量常用方法实例解析

    这篇文章主要介绍了Postman内建变量常用方法实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • JS+CSS3实现超炫的散列画廊特效

    JS+CSS3实现超炫的散列画廊特效

    这篇文章主要为大家详细介绍了JS+CSS3实现超炫的散列画廊特效,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-07-07
  • 复杂的javascript窗口分帧解析

    复杂的javascript窗口分帧解析

    这篇文章主要为大家详细解析了复杂的javascript窗口分帧,什么是窗口分帧,JavaScript中帧窗口之间的关系,感兴趣的小伙伴们可以参考一下
    2016-02-02
  • JS实现图片局部放大或缩小的方法

    JS实现图片局部放大或缩小的方法

    这篇文章主要介绍了JS实现图片局部放大或缩小的方法,涉及javascript事件响应及页面元素动态操作相关技巧,需要的朋友可以参考下
    2016-08-08
  • JS交互点击WKWebView中的图片实现预览效果

    JS交互点击WKWebView中的图片实现预览效果

    这篇文章主要介绍了JS交互点击WKWebView中的图片实现预览效果,需要的朋友可以参考下
    2018-01-01
  • echarts自定义饼图数据刷新和颜色渲染问题浅析

    echarts自定义饼图数据刷新和颜色渲染问题浅析

    这篇文章主要给大家介绍了关于echarts自定义饼图数据刷新和颜色渲染问题的相关资料,内容简明扼要并且容易理解,绝对能使你眼前一亮,需要的朋友可以参考下
    2023-05-05
  • 使用JavaScript实现轮播图效果完整实例

    使用JavaScript实现轮播图效果完整实例

    我们在各种网页中经常见到轮播图的效果,下面这篇文章主要给大家介绍了关于使用JavaScript实现轮播图效果的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-01-01
  • 微信公众平台获取access_token的方法步骤

    微信公众平台获取access_token的方法步骤

    这篇文章主要介绍了微信公众平台获取access_token的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03

最新评论