js开发:正则控制输入银行卡

js控制四个数字加空格(银行卡)并且支持插入数字(解决光标跳动问题) 一般来说,为了便于用户输入,银行卡号会每四个数字用空格隔开,这个在前端使用正则表达式不难做到,但是容易出现不能从数字中间插入的问题:光标移动到中间,输入一个数字后光标便自动跳转到最右了。 上述问题非常影响用户体验,经过一段时间的研究,我用以下办法解决了此问题:Input这里使用了type=”tel”,这样是为了在移动端调出数字键盘,H5的新特性pattern也可以实现,但是这个属性的兼容性并不是很好 阅读详情
//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); /*帐号的总数, 包括空格在内 */
    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;
}
</script>


<input type="text" value="" size="25" onkeyup="formatBankNo(this)" onkeydown="formatBankNo(this)" name="account" id="account">
JavaScript实现输入框四位数字自动分割加空格及光标精准控制 htmltable {th, td {th {pre {简介:本文介绍了如何使用JavaScript实现在输入框中每四位数字自动添加空格的功能,常用于银行卡号、手机号等长数字输入场景,以提升可读性和用户体验。重点解决了在带空格格式化文本中输入或删除时常见的光标错位问题,确保用户在任意位置操作时光标能正确响应。通过监听input事件、正则表达式格式化、动态计算光标位置等技术手段,实现流畅自然的交互效果。该方案适用于前端开发中的表单优化,具有实用性和推广价值。 阅读详情

相关推荐

Vue.js实现多张银行卡平滑切换动画项目代码

在中一定要记得清理定时器和事件监听:否则在 SPA 中频繁切换路由会导致大量残留节点,最终拖垮浏览器。整套方案下来,你会发现 Vue 不只是一个框架,更是一种思维方式。它教会我们在复杂中寻找规律,在变化中建立秩序。而这,或许正是优秀前端工程的本质所在吧 🎯✨本文还有配套的精品资源,点击获取简介:本项目基于Vue.js与CSS3技术,模拟支付宝风格的多张银行卡切换功能,适用于支付方式管理、账户绑定等前端交互场景。

weixin_35835030的博客 894

js 银行卡正则校验

// pages/wapManageFinance/bankManage.js const { getProvinceList, getCityList, getCountyList, addMemberBank, memberBankList, delBank } = require('../../../common/http.js') Page({ /** * 页面的初始数据 */ data: { isaddBank: false, bank.

bug_love的博客 5536

银行卡号正则校验js工具类

银行卡号正则校验js工具类

正则表达式前端js,银行卡号/身份证/姓名号脱敏,匹配两个字符串

方法1 保留卡号的前4位和后4位,中间的都变成*号 > '6212268202014638888'.replace(/(?<=\d{4})\d+(?=\d{4})/,"****"); > //6212****8888

叮当的猫猫的博客 5635

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

本文实例讲述了js实现模拟银行卡账号输入显示效果。分享给大家供大家参考,具体如下: 先来看运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-mn-bank-card-input-style-codes/ 具体代码如下: [removed] function www_jb51_net (BankNo) { if (BankNo.value == "") return; var account = new String (BankNo.value); a

使用TMS320F28335控制四位共阳数码管

简要阐述利用F28335控制四位共阳数码管的整个过程,包括原理、思路、部分代码以及调试过程。

liujunhaozuishuai的博客 2658

身份证、银行卡 js正则校验

校验身份证号 function checkIdcard(personnumber) {     personnumber = personnumber.toUpperCase();     //身份证号码为15位或者18位,15位时全为数字,18位前17位为数字,最后一位是校验位,可能为数字或字符X。     if (!(/(^\d{15}$)|(^\d{17}([0-9]|X)$)/.test...

gelusheng123456的博客 6187

基于Ansys Fluent 的颗粒分离/过滤解决方案

过滤是指通过特殊装置将颗粒移除,将流体提纯净化的过程。过滤的方式很多,应用的物系也很广泛,固-液、固-气、大颗粒-小颗粒等。

sh_djoin的博客 1852

银行卡号每4个隔开

&lt;input type="text" onkeyup="this.value=this.value.replace(/\D/g,'') .replace(/....(?!$)/g,'$&amp; ')" /&gt;

hong199275的专栏 1963

2025.03.14【读书笔记】|GWAS分析神器:BOLT-LMM工具介绍与快速安装

在生物信息学领域,全基因组关联分析(GWAS)已成为揭示遗传与疾病关系的强有力工具。BOLT-LMM作为一款专为大规模样本量设计的GWAS分析工具,将极大地提高研究人员的工作效率。大家好,今天我们来聊聊一个非常强大的生物信息学工具——BOLT-LMM。它是基于线性混合模型(LMM)的全基因组关联分析(GWAS)分析工具,通过快速的方差近似方法在计算效率上实现了显著的提升。BOLT-LMM的高效性能使其成为大规模样本GWAS分析的理想选择,它将进一步推动生物信息学和遗传学研究的发展。

1093

基于51单片机的多功能计算器全套设计

当今社会,随着人们物质生活的不断提高,电子产品已经走进了家家户户,无论是生活或学习,还是娱乐和消遣几乎样样都离不开电子产品,大型复杂的计算能力是人脑所不能胜任的,而且人脑比较容易出错。计算器作为一种快速通用的计算工具方便了用户的使用。计算器可谓是我们最亲密的电子伙伴之一。本设计着重在于分析计算器设计开发过程中的环节和步骤,并从实践经验出发对计算器设计做了详细的分析和研究。 本设计是以STC89C52单片机为核心的计算器模拟系统设计,输入采用5×8矩阵键盘,可以进行加、减、乘、除等十几种数字运算,同时支持括号

runweipa的博客 1742

js控制手机号、银行卡输入格式化

在手机端还是在pc端,做手机号码的输入,或者是做银行卡的输入,如果是按照正常的一连串输完,肯定会被产品吐槽,所以接下来就是js控制输入加空格的解决方案,话不多说,上代码: function formatInput(inputElem){ // var key = event.keyValue; var ctx = inputElem; console.log("value:" +ctx.valu...

liuxiaoyu334433的专栏 2032

【电磁场计算】磁偶极子在外磁场中的受力

最近在总结电磁场计算公式的时候发现,关于磁偶极子受力的计算公式,在不同文献中的说明有点出入,在此特地写一篇博客澄清一下。

sky4403的博客 7462

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

//js正则实现用户输入银行卡号的控制及格式化function formatBankNo (BankNo){if (BankNo.value == "") return;var account = new String (BankNo.value);account = account.substring(0,22); /*帐号的总数, 包括空格在内 */if (account.match (".[...

weixin_33042645的博客 552

VN1640 CH5 I/O通道终极指南:【从硬件原理—>工程实战—>自动化测试实战】

摘要:本文详细解析Vector VN1640 CH5 I/O通道的硬件原理与工程应用,涵盖模拟输入(AIN)、数字输入(DIN)和数字输出(DOUT)三大功能模块的配置指南。通过硬件隔离设计实现高精度信号采集与驱动控制,重点分析开漏输出特性及保护机制。提供PWM控制、ECU上电时序测试、传感器闭环控制等实战案例的CAPL脚本代码,并强调多设备同步采集的精准性(时间偏差<1µs)。适用于汽车电子HIL测试、ECU信号监测等场景,所有方案均通过实际项目验证。

汽车控制器系统开发、VIL测试、HIL测试、MIL测试、EMS电喷系统标定与开发、热管理系统标定 759

【全局路径规划地图算法】Voronoi路径规划探索(附C++代码)

认知有限,望大家多多包涵,有什么问题也希望能够与大家多交流,共同成长!本文先对Voronoi路径规划探索做个简单的介绍,具体内容后续再更,其他模块可以参考去我其他文章提示:以下是本篇文章正文内容。

qq_35635374的博客 2239

银行账号正则_使用正则验证用户输入的银行卡号(附代码)

这次给大家带来使用正则验证用户输入的银行卡号(附代码),使用正则验证用户输入银行卡号的注意事项有哪些,下面就是实战案例,一起来看一下。//js正则实现用户输入银行卡号的控制及格式化function formatBankNo (BankNo){if (BankNo.value == "") return;var account = new String (BankNo.value);account ...

weixin_39542477的博客 7921

【车载以太网】【AVB/TSN】IEEE802.1Qav队列及转发协议

目录 一、概述 二、优先级排队算法 三、基于信用的流量整形算法 一、概述 IEEE 802.1Qav 队列及转发协议(Qav)针对不同数据流选择不同的传输选择算法来保障对时间敏感的 AV 数据流的实时传输。为了避免传统的异步以太网数据流量与 AVB 流量之间对网络资源的竞争,AVB 交换机内使用优先级排队算法和基于信用的流量整形算法实现数据流的调度。 二、优先级排队算法 优先级排队算法主要用于传统以太网数据流(BE, Best Effort)的调度传输,BE 流通过基于优先级...

专注汽车软件开发、AutoSAR、车载以太网、SOA、EE架构。 4687

JS实现input中输入数字,控制每四位加一个空格(银行卡号格式)

前言 今天来讲讲js中实现input中输入数字,控制每四位加一个空格的方法!这个主要是应用于我们在填写表单的时候,填写银行卡信息,要求我们输入的数字是四位一个空格!今天主要介绍两种方式来实现这个方法!但是都运用到了键盘码。下面我就列举一下键盘码,以备后面查阅! 键盘各按键对应的数字 keycode 8 = BackSpace | keycode 9 = Ta...

weixin_30752377的博客 1139

Statistics and Machine Learning Toolbox

Statistics and Machine Learning Toolbox(带书签),MATLAB统计学习工具

蓝牙模块HM-10手册

蓝牙模块HM-10手册,该手册对蓝牙模块HM-10进行了详细的介绍和使用方法以及一些AT指令。

js正则实现用户输入银行卡号的控制及格式化

为什么80%的码农都做不了架构师?>>> ...

weixin_34085658的博客 407

Devexpress16.2.6破解工具

Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具

正则表达式验证银行卡号

BPM.blockUI({ target: $("#blockAddDiv"), boxed: true, message: FeekongLan.label.loadmsg });//增加锁定 var pattern = /^([1-9]{1})(\d{14}|\d{18})$/, str = $("#C...

Martin 的博客 9万+

文档:亲测可用解决vnc灰屏,黑屏,鼠标大黑叉情况

主要解决vnc-viewer灰屏,黑屏,鼠标大黑叉等现象,详细见文档。

Input输入框输入银行卡号自动空格

input输入框是表格中用都最多的,像输入手机,密码,银行卡号的,很多对于输入银行卡号是没有处理的,比如这样~~ 看起来是不是一团乱麻,, 眼睛瞬间一片漆黑~ 如果是这样,会不会好很多呢~~ 其实逻辑非常的简单,就是利用我们输入数字时候的键盘key来控制~ 毕竟银行卡号肯定是只有数字的吧~~ 键盘上可以输入数字的,除了小键盘数字键,就是键盘上方的数字键了,~ 把这些都找出...

weixin_30692143的博客 961

js实现input中输入数字,控制每四位加一个空格(银行卡号格式)

转自:http://www.haorooms.com/post/js_yinghangkahao 前言 今天来讲讲js中实现input中输入数字,控制每四位加一个空格的方法!这个主要是应用于我们在填写表单的时候,填写银行卡信息,要求我们输入的数字是四位一个空格!今天主要介绍两种方式来实现这个方法!但是都运用到了键盘码。下面我就列举一下键盘码,以备后面查阅! 键盘各按键对应的数字 key...

weixin_30363817的博客 1517

银行卡输入框,四位一空格

  js控制四个数字加空格(银行卡)并且支持插入数字(解决光标跳动问题) &lt;input type="text" onkeyup="this.value=this.value.replace(/\D/g,'').replace(/....(?!$)/g,'$&amp; ')" /&gt;...

weixin_42277397的博客 1019

Oracle、JS实现 银行卡号 每四位 加空格分隔

Oracle中substr函数用法: substr(字符串,截取开始位置,截取长度) //返回截取的字 substr('Hello World',0,1) //返回结果为 'H'  *从字符串第一个字符开始截取长度为1的字符串 substr('Hello World',1,1) //返回结果为 'H'  *0和1都是表示截取的开始位置为第一个字符 substr('Hello World',...

BestEternity的博客 1100
上一篇: H5开发:sessionStorage和localStorage
下一篇: ajax开发:Promise解决多个异步Ajax请求导致的代码嵌套问题
Generon
博客等级 码龄11年 135粉丝 135原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值