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

本文实例讲述了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程序设计有所帮助。

(0)

相关推荐

  • js随机生成姓名、手机号、身份证号、银行卡号【实现代码】

    开发测试的时候,经常需要填写姓名.手机号.身份证号.银行卡号,既要符合格式要求.又不能重复.大家会到网上搜各种生成器.能不能自己写一个简单的生成器呢.下面是随机生成姓名.手机号.身份证号.银行卡号的js代码. // 生成随机姓名 function getName(){ var familyNames = new Array( "赵", "钱", "孙", "李", "周", "吴", &

  • js手机号4位显示空格,银行卡每4位显示空格效果

    开发有时候会遇到输入手机号和银行卡号,按照每4位显示一个空格的需求,方便用户阅读,如果是纯展示,就很容易实现,如果是一边输入一边展示则有点难度 有人用两个input实现,一个负责输入数据,但是透明看不见,另外一个展示在界面上,变相的解决了这个需求(手机上可调用数字键盘) 本次取巧写个demo,只用一个input用定时器不断的查询输入的字符来判断输入的数据(无法直接调用数字键盘,因为里边有空格) 如果是银行卡号,将字符判断长度更改为,也可以根据实际需求来判断长度 lastLen === 5 ||

  • JS代码随机生成姓名、手机号、身份证号、银行卡号

    开发测试的时候,经常需要填写姓名.手机号.身份证号.银行卡号,既要符合格式要求.又不能重复.大家会到网上搜各种生成器. 下面小编自己写的一个js生成器代码.随机生成姓名.手机号.身份证号.银行卡号的js代码. // 生成随机姓名 function getName(){ var familyNames = new Array( "赵", "钱", "孙", "李", "周", "吴", &

  • nodejs利用http模块实现银行卡所属银行查询和骚扰电话验证示例

    http模块内部封装了http服务器和客户端,因此Node.js不需要借助Apache.IIS.Nginx.Tomcat等传统HTTP服务器,就可以构建http服务器,亦可以用来做一些爬虫.下面简单介绍该模块的使用,其具体API,大家可以自行去nodejs官方文档查看. 1.http.Server服务器 使用http.createServer([requestListener])方法创建一个http服务器,该方法返回一个新的http.Server实例,如果指定了requestListener,则

  • js jquery验证银行卡号信息正则学习

    jquery代码 复制代码 代码如下: $("#bankAccountNumber").change(function(){ alert("1"); var account = $("channelForm.bankAccount.account").val(); alert("2"); var reg = /^\d{19}$/g; // 以19位数字开头,以19位数字结尾 if( !reg.test(account) ) {

  • js格式化输入框内金额、银行卡号

    我们在项目中经常遇到需要格式化的金额数和银行卡号,一般我们常见的有两种表现形式:输入框内格式化和输入框外格式化.这里我主要把我在项目中遇到的输入框内部格式化的,代码亮出来,框外的格式化相对简单一点. 页面代码: <div class="wrap"> <input type="text" id="bankCard" placeholder="输入银行卡号"> </div> <div cl

  • JavaScript中校验银行卡号的实现代码

    1.先引入jquery.js 2.接着引入luhmCheck.js //银行卡号Luhm校验 3.看下面的案例: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&

  • JS填写银行卡号每隔4位数字加一个空格

    1.原生js写法 !function () { document.getElementById('bankCard').onkeyup = function (event) { var v = this.value; if(/\S{5}/.test(v)){ this.value = v.replace(/\s/g, '').replace(/(.{4})/g, "$1 "); } }; }(); 2.jQuery写法 <!DOCTYPE html> <html la

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

    本文实例讲述了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 (B

  • C语言模拟实现密码输入的示例代码

    目录 引言 思路分析 代码实现 代码分析 引言 登录账号时我们要输入密码,密码输入错误时会提示密码错误.有时密码的输入次数会被限制,例如银行卡,当我们3次密码都输入错误时卡会被冻结.下面用C语言模拟实现密码输入. 思路分析 首先要确立一个正确密码,再确定密码输入限制次数,接着用一个scanf语句读取用户输入的密码.将用户输入的密码和先前确定的密码进行比较,如果密码输入正确就显示密码正确,如果密码输入错误就提示密码错误,并告诉用户还有几次输入机会. 代码实现 #include<stdio.h>

  • JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码

    本文实例讲述了JS实现模拟百度搜索"2012世界末日"网页地震撕裂效果代码.分享给大家供大家参考,具体如下: 这是一款JS模拟百度搜索"2012世界末日"网页地震撕裂效果,本效果是模仿用户在百度输入"2012世界末日"后点击搜索后出来的网页效果,网页在震动,像是地震了,而后开始撕裂,然后显示出相关的文字说明,很酷的效果,希望大家可以学习借鉴. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-

  • 利用JavaScript模拟京东按键输入功能

    在看到这个功能的时候我也很惊讶,京东竟然做了这样的一个功能.在京东商城网页版,无论你在什么位置,只需要按下S键,就可以将光标定位到搜索栏进行搜索.虽然说这是一个很不错的功能,但是貌似没有几个人知道. 程序实现很简单,在s键上升的时候搜索框获得焦点就可以了. <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name=&q

  • JS使用正则控制用户输入银行卡号及格式化

    //js正则实现用户输入银行卡号的控制及格式化 <script language="javascript" type="text/javascript"> function formatBankNo (BankNo){ if (BankNo.value == "") return; var account = new String (BankNo.value); account = account.substring(0,22); /

  • JS实现六位字符密码输入器功能

    老规矩~ 上DEMO,过过瘾先:六位字符密码输入器 再上源码:六位字符密码输入器 从DEMO中我看可以看出,首先只能输入六个字符,并且仅允许输入数字,在输入六位数字完成之后会自动执行一个回调(DEMO中是将输入结果显示出来了) 一. 先说原理 首先呢,我们需要两个东东:其一是一个真是的输入框,即:真正处于焦点状态并获取用户输入的input:其二是一组伪输入框,即:并没有真正获取焦点,但只是显示了当前输入的值(当然啦,密码嘛,只有一个小黑点而已~). 其次呢,我们需要简单不惧一下,让着一组(6个)

  • js输入框使用正则表达式校验输入内容的实例

    js输入框输入校验 /*用户名称格式判断--用户名只能为下划线.数字.字母或中文长度不超过10个字符*/ function checkUserName(str) { var reg = /^[_0-9a-zA-Z\u4e00-\u9fa5]{1,10}$/; return reg.test(str); } 以上这篇js输入框使用正则表达式校验输入内容的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码

    JS 控制文本框只能输入数字 <input onkeyup="value=value.replace(/[^0-9]/g,'')"onpaste="value=value.replace(/[^0-9]/g,'')" oncontextmenu ="value=value.replace(/[^0-9]/g,'')"> JS 控制文本框只能输入数字.小数点 <inputonkeyup="value=value.repl

  • js控制文本框只输入数字和小数点的方法

    本文实例讲述了js控制文本框只输入数字和小数点的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: function clearNoNum(obj) {  obj.value = obj.value.replace(/[^\d.]/g, "");//清除"数字"和"."以外的字符  obj.value = obj.value.replace(/^\./g, "");//验证第一个字符是数字而不是.  obj.

  • js实现模拟计算器退格键删除文字效果的方法

    本文实例讲述了js实现模拟计算器退格键删除文字效果的方法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &

随机推荐