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


Posted in Javascript onNovember 18, 2015

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

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

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

在线演示地址如下:

具体代码如下:

<script language="javascript" type="text/javascript">
function www_3water_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_3water_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_3water_net(this)" onkeydown="www_3water_net(this)" name="account" id="account">

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

Javascript 相关文章推荐
利用ASP发送和接收XML数据的处理方法与代码
Nov 13 Javascript
FLASH 广告之外的链接
Dec 16 Javascript
JavaScript replace(rgExp,fn)正则替换的用法
Mar 04 Javascript
初学js 新节点的创建 删除 的步骤
Jul 04 Javascript
javascript 兼容所有浏览器的DOM扩展功能
Aug 01 Javascript
Javascript中arguments对象详解
Oct 22 Javascript
jQuery中:image选择器用法实例
Jan 03 Javascript
asp.net+js实现金额格式化
Feb 27 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
Jul 27 Javascript
浅谈Vue.js中的v-on(事件处理)
Sep 05 Javascript
详解JavaScript中的数据类型,以及检测数据类型的方法
Sep 17 Javascript
实现AJAX异步调用和局部刷新的基本步骤
Mar 17 Javascript
跟我学习javascript的prototype原型和原型链
Nov 18 #Javascript
超精准的javascript验证身份证号的具体实现方法
Nov 18 #Javascript
javascript中checkbox使用方法简单实例演示
Nov 17 #Javascript
javascript下拉列表中显示树形菜单的实现方法
Nov 17 #Javascript
JS封装cookie操作函数实例(设置、读取、删除)
Nov 17 #Javascript
jquery可定制的在线UEditor编辑器
Nov 17 #Javascript
JS实现选项卡实例详解
Nov 17 #Javascript
You might like
PHP实现的增强性mhash函数
2015/05/27 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
使用composer命令加载vendor中的第三方类库 的方法
2019/07/09 PHP
使用javascript访问XML数据的实例
2006/12/27 Javascript
javascript 从if else 到 switch case 再到抽象
2010/07/17 Javascript
Javascript图像处理—虚拟边缘介绍及使用方法
2012/12/27 Javascript
搭建pomelo 开发环境
2014/06/24 Javascript
js实现非常简单的焦点图切换特效实例
2015/05/07 Javascript
jquery不常用方法汇总
2015/07/26 Javascript
实例分析js事件循环机制
2017/12/13 Javascript
jquery实现楼层滚动效果
2018/01/01 jQuery
jquery+ajaxform+springboot控件实现数据更新功能
2018/01/22 jQuery
Vue 去除路径中的#号
2018/04/19 Javascript
springMvc 前端用json的方式向后台传递对象数组方法
2018/08/07 Javascript
ionic使用angularjs表单验证(模板验证)
2018/12/12 Javascript
[01:49]一目了然!DOTA2DotA快捷操作对比第二弹
2014/05/16 DOTA
python实现的DES加密算法和3DES加密算法实例
2015/06/03 Python
Python线程指南详细介绍
2017/01/05 Python
python用户管理系统
2018/03/13 Python
判断python对象是否可调用的三种方式及其区别详解
2019/01/31 Python
详解python配置虚拟环境
2019/04/08 Python
Pandas分组与排序的实现
2019/07/23 Python
Python数学形态学实例分析
2019/09/06 Python
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
2013/01/30 HTML / CSS
canvas 基础之图像处理的使用
2020/04/10 HTML / CSS
Ray-Ban雷朋美国官网:全球领先的太阳眼镜品牌
2016/07/20 全球购物
波比布朗英国官网:Bobbi Brown英国
2017/11/13 全球购物
德国家具购物网站:Möbel Höffner
2019/08/26 全球购物
Nicole Miller官方网站:纽约女装品牌
2019/09/14 全球购物
Java基础面试题
2012/11/02 面试题
院药学专业个人求职信
2013/09/21 职场文书
出口公司经理求职简历中的自我评价
2013/10/13 职场文书
新闻学专业应届生求职信
2013/11/08 职场文书
品德评语大全
2014/05/05 职场文书
个人作风建设剖析材料
2014/10/11 职场文书
JavaScript实现登录窗体
2021/06/22 Javascript