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 相关文章推荐
javascript插入样式实现代码
Feb 22 Javascript
带左右箭头图片轮播的JS代码
Dec 18 Javascript
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
Dec 02 Javascript
JSON字符串和对象相互转换实例分析
Jun 16 Javascript
滚动条的监听与内容随着滚动条动态加载的实现
Feb 08 Javascript
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
May 22 Javascript
BootStrap 动态表单效果
Jun 02 Javascript
个人小程序接入支付解决方案
May 23 Javascript
JS通用方法触发点击事件代码实例
Feb 17 Javascript
js 数组当前行添加数据方法详解
Jul 28 Javascript
react+antd 递归实现树状目录操作
Nov 02 Javascript
如何利用js在两个html窗口间通信
Apr 27 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实现文件上传二法
2006/10/09 PHP
有关JSON以及JSON在PHP中的应用
2010/04/09 PHP
PHP多维数组排序array详解
2017/11/21 PHP
javascript的函数、创建对象、封装、属性和方法、继承
2011/03/10 Javascript
从jQuery.camelCase()学习string.replace() 函数学习
2011/09/13 Javascript
Javascript连接多个数组不用concat来解决
2014/03/24 Javascript
javascript中clipboardData对象用法详解
2015/05/13 Javascript
JavaScript实现的简单拖拽效果
2015/06/01 Javascript
jQuery验证插件validate使用详解
2016/05/11 Javascript
AngularJs表单验证实例详解
2016/05/30 Javascript
vue.js实现表格合并示例代码
2016/11/30 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
2016/12/02 Javascript
详解动画插件wow.js的使用方法
2017/09/13 Javascript
bmob js-sdk 在vue中的使用教程
2018/01/21 Javascript
如何用Node写页面爬虫的工具集
2018/10/26 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
2018/12/16 Javascript
微信小程序 轮播图实现原理及优化详解
2019/09/29 Javascript
VUE实现吸底按钮
2021/03/04 Vue.js
Python完全新手教程
2007/02/08 Python
python删除过期文件的方法
2015/05/29 Python
python实现汉诺塔递归算法经典案例
2021/03/01 Python
Python中flatten( )函数及函数用法详解
2018/11/02 Python
解决python3中的requests解析中文页面出现乱码问题
2019/04/19 Python
Python数据类型之List列表实例详解
2019/05/08 Python
Python netmiko模块的使用
2020/02/14 Python
Python连接HDFS实现文件上传下载及Pandas转换文本文件到CSV操作
2020/06/06 Python
Python使用urlretrieve实现直接远程下载图片的示例代码
2020/08/17 Python
详解Django中异步任务之django-celery
2020/11/05 Python
使用html5制作loading图的示例
2014/04/14 HTML / CSS
工艺工程师岗位职责
2014/03/04 职场文书
观看《永远的雷锋》心得体会
2014/03/12 职场文书
社区综治宣传月活动总结
2014/07/02 职场文书
五年级学生评语大全
2014/12/26 职场文书
2015年妇女工作总结
2015/05/14 职场文书
python实现简单反弹球游戏
2021/04/12 Python
Mysql数据库手动及定时备份步骤
2021/11/07 MySQL