表单验证--手机号，身份证，银行卡号

最新推荐文章于 2024-05-06 16:35:05 发布
最新推荐文章于 2024-05-06 16:35:05 发布
阅读量4.1k 收藏 4
点赞数
分类专栏： 表单验证
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41749698/article/details/79628767
版权

1、表单信息

<body style="background:#fafafa">
<div class="container">
	<!-- 头部  -->
    <header class="header"> 绑定银行卡</header>
    <!-- 内容  -->
	<div class="bindcard-error" style="display:none;">xxx数据填写报错提示！</div>
	
	<div class="bindcard">
	    
		<div class="bindcard-border">
			<input type="text" id="username" name="AccountName" value="" placeholder="您的真实姓名" />
		</div>
		<div class="bindcard-border">
			<input type="text" id="IdentificationNumber" name="IdentificationNumber" value="" placeholder="您的真实身份证号" />
		</div>
		<div class="bindcard-border">
			<select οnchange=""  name="BankID" id="oldBank" required="required">
			</select>
		</div>
		<div class="bindcard-border">
			<input type="text" id="AccountNumber" name="AccountNumber" value="" placeholder="请输入银行卡号" />
		</div>
		<div class="bindcard-border">
			<div class="bindcard-border-list">
			<select οnchange="toggleProvince();"  name="province" id="province" required="required">
				<option style="color:#787878" value=0>请选择开户行省</option>
				#{list items:provices, as:'provice'}
				  <option id="${provice?.id}" value="${provice?.id}" style="color:#787878">${provice?.name}</option>
				#{/list}
			</select>
			<select οnchange=""  name="city" id="city" required="required" >
				<option style="color:#787878" value=0>请选择开户行市</option>
			</select>
			</div>
		</div>
		<div class="bindcard-border">
			<input type="text" id="branch_bank_name" name="branch_bank_name" value="" placeholder="请填写支行名称" />
		</div>
		<div class="bindcard-border">
			<input type="text" id="PhoneNumber" name="PhoneNumber" value="" placeholder="请填写对应银行预留手机号" />
		</div>
	#{form @m.front.account.FundsManageAction.verifySMS(), id:'SMSCodeSubmit'}
		<div class="bindcard-border">
			<input type="number" id="phoneCode" name="code" value="" placeholder="输入验证码"/>
			<input type="hidden" id = "randomID" />
			<a href="javascript:void(0);" id="sendSmsCode" οnclick="sendCode()" >获取验证码</a>
			<!-- 获取绑定的信息 -->
			<input type="hidden" id="bindId" name="bindId" />
		</div>
		<a class="bindcard-btn"  href="javascript:void(0);" οnclick="bindBankCard();" >绑定</a>
	</div>
	#{/form}
</div>
</body>

2、表单验证js代码

<script type="text/javascript">
		//绑卡验证银行卡是否存在
		
	  $(document).ready(function(){
		  $("#oldBank").click(openBankS());
	   });
		// 查询快捷支付银行
		function openBankS(){
		     $("#oldBank").html("");
		     var datasJson1;
		     $.ajax({
		         async: false,
		         type: "get",
		         dataType: "json",
		         url: "/m/findBankCode",
		         success: function (msg) {
		         	 for(var i=0,l=msg.length;i<l;i++){
		         		datasJson1+="<option  value="+msg[i].bank_code+">"+msg[i].bank_name+"</option>";
		          	 } 
		         	 $("#oldBank").append(datasJson1);
		         }
	       });
		}
		// 查询省市
		function toggleProvince(){
			$("#city").empty();
			var cityStr = "";
			var pcode = $("#province").find("option:selected").val();
			if(!pcode){
			 return false;
			}else{
		 		$.ajax({
		            async: false,
		            type: "get",
		            data:"provinceId="+pcode,
		            url: '/m/findCityByProvinceId',
		            success: function (msg) {
		            	for(var i=0,l=msg.length;i<l;i++){
		            		cityStr+="<option id='"+msg[i].province_id+"' value='"+msg[0].name+"' style='color:#787878'>"+msg[i].name+"</option>";
		            	}
		            	$("#city").append(cityStr);
		            }
	        	}); 
			}
		}
		
		
	
		
		/* function bindBankCard(){
			$("#SMSCodeSubmit").submit();
		} */
		
		
		// 验证中文名称
		function isChinaName(name) {
		    var pattern = /^[\u4E00-\u9FA5]{1,6}$/;
		    return pattern.test(name);
		}
		// 验证手机号
		function isPhoneNo(phone) {  
			var pattern = /^(1[34578]\d{9}$)/; 
		    return pattern.test(phone);  
		}


		// 验证身份证 
		function isCardNo(card) {  
		   var pattern = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;  
		   return pattern.test(card); 
		} 
		// 验证银行卡
		function isBankNo(card) {  
			 var pattern = /^([1-9]{1})(\d{14}|\d{18})$/;
		   return pattern.test(card); 
		} 
		//验证手机验证码
		
		
		/*点击时发送短信验证码*/
		function sendCode(){
			var PhoneNumber = $.trim($("#PhoneNumber").val());
			var bankID = $.trim($('#oldBank').val());
			var AccountName=$.trim($('#username').val());
			var AccountNumber=$.trim($('#AccountNumber').val());
			var IdentificationNumber=$.trim($('#IdentificationNumber').val());
			var province=$('#province').val();;
			var branch_bank_name=$.trim($('#branch_bank_name').val());
          	var city=$('#city').val();
          	
			var str = '';
				
			    // 判断名称
			    if(AccountName.length == 0) {
			        str += '请输入姓名';
			        $(".bindcard-error").html(str).show();
			        $('#username').focus();
			        return;
			    } 
			    // 验证身份证
			    if(IdentificationNumber.length == 0) {  
			        str += '请输入身份证号码';
			        $(".bindcard-error").html(str).show();
			        $('#IdentificationNumber').focus();
			        return;
			    } else {
			        if(isCardNo(IdentificationNumber) == false) {
			            str += '身份证号格式不正确';
			            $(".bindcard-error").html(str).show();
			            $('#IdentificationNumber').focus();
			            return;
			        }
			    }
			    // 判断开户行
			    if(bankID == 0) {
			        str += '请选择开户行';
			        $(".bindcard-error").html(str).show();
			        $('#oldBank').focus();
			        return;
			    } 
			    // 判断开户行省
			    if(province == 0) {
			        str += '请选择开户行省';
			        $(".bindcard-error").html(str).show();
			        $('#province').focus();
			        return;
			    } 
				 // 判断开户行城市
			    if(city == 0) {
			        str += '请选择开户行城市';
			        $(".bindcard-error").html(str).show();
			        $('#city').focus();
			        return;
			    } 
			    // 判断银行卡号
			    if (AccountNumber.length == 0) {  
			        str += '请输入银行卡号';
			        $(".bindcard-error").html(str).show();
			        $('#AccountNumber').focus();
			        return;
			    } else {
			        if(isBankNo(AccountNumber) == false) {
			           str += '银行卡号格式错误';
			           $(".bindcard-error").html(str).show();
			           $('#AccountNumber').focus();
			           return;
			        }
			    }
			    // 判断手机号码
			    if (PhoneNumber.length == 0) {  
			        str += '请输入手机号';
			        $(".bindcard-error").html(str).show();
			        $('#PhoneNumber').focus();
			        return;
			    } else {
			        if (isPhoneNo(PhoneNumber) == false) {
			           str += '手机号码格式错误';
			           $(".bindcard-error").html(str).show();
			           $('#PhoneNumber').focus();
			           return;
			        }
			    }
				
			    // 判断开户行
			    if (branch_bank_name.length == 0) {  
			        str += '请輸入支行名称';
			        $(".bindcard-error").html(str).show();
			        $('#branch_bank_name').focus();
			        return;
			    } 
				
			    


			   /*  // 验证地址
			    if($.trim($('#address').val()).length == 0) {  
			        str += '地址没有输入\n';
			        $('#address').focus();
			    } */


			    // 如果没有错误则显示
			    if($.trim(str) != '') {
			        $(".bindcard-error").html(str).show();
			        return;
			    } else {
			    	$(".bindcard-error").hide();					
				}
			    
			    
			    $.ajax({
					url:"@{m.front.account.FundsManageAction.getSMSCode()}",
					data:{
						"PhoneNumber":PhoneNumber,
						"bankID":bankID,
						"AccountName":AccountName,
						"AccountNumber":AccountNumber,
						"IdentificationNumber":IdentificationNumber,
						"province":province,
						"branch_bank_name":branch_bank_name,
						"city":city
					},
					dataType:"json",
					type:"post",
					success:function(result){
						if(result.success==true){
							countDown();
							$("#bindId").val(result.bankaccount.id);
						}
						if(result.success==false){
							$(".bindcard-error").html(result.errorMsg).show();
							return;
						}
						
						
						
					}
					});
			    }			
			    
		
		var remain = 90;
		/*点击发送短信验证码后倒计时*/
		function countDown() {
		   if (remain == 0) {
			   remain = 90;
			   $("#sendSmsCode").html("点击发送");
			   $("#sendSmsCode").attr("onclick", "sendCode();");
			   $("#sendSmsCode").attr("style", "cursor:pointer");
			   return;
		   }


		   $("#sendSmsCode").html("" + remain-- + "秒后重发");
		   setTimeout("countDown()",1000);
		}
		// 绑卡
		function bindBankCard() {
			var phoneCode=$.trim($('#phoneCode').val());
			// 判断验证码
			var str="";
		    if (phoneCode.length == 0) {
		        str += '请輸入验证码';
		        $(".bindcard-error").html(str).show();
		        $('#phoneCode').focus();
		        return;
		    }
		    $("#SMSCodeSubmit").submit();
		}
</script>

源码：





binglong180
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【Excel VBA】银行卡信用卡卡号校验功能函数
碰碰虎的博客
05-17 1452
纲举目张说明代码code使用方法 说明 之前我讲了身份证号校验功能函数，本次就介绍一下，银行卡和信用卡卡号的校验功能函数。参考百度百科中的介绍： Luhn 算法或是Luhn 公式，也被称作“模10算法”。它是一种简单的校验公式，一般会被用于身份证号码，IMEI号码，美国供应商识别号码，或是加拿大的社会保险号码的验证。该算法是由IBM的科学家Hans Peter Luhn所创造，于1954年1月6日提出该专利的申请，并于1960年8月23日被授予，在美国的专利号为2950048。 该算法一直都被大家所公用，
HTML5手机身份证上传表单提交特效代码
03-20
5. **表单验证**: 除了基本的文件上传，该代码可能还包含了表单验证功能，确保用户输入的信息（如姓名、身份证号）完整且符合格式要求，提高了数据质量。 6. **跨平台兼容性**: HTML5的特性使其能在大多数现代...
函数：银行卡号验证和开户行
07-06
可查询各大银行的卡号验证是否有较，还可以查询该银行卡号的开户行，方便大家快速用表格识别银行的有效性和开户行，各大银行都可查询到！！
js银行卡、手机号等校验汇总
zeng092210的博客
05-21 2092
前端JS银行卡等校验方法总结 银行卡输入添加空格和长度限制 /** * 银行卡格式化 * 如何：6217 0044 0000 2047555 */ formatBankNo:function (BankNo){ if (BankNo.value == "") return; var account = new String (BankNo.value); account = account.substring(0,22).
前端表单中的手机号的验证
最新发布
qq_51846847的博客
05-06 594
vue3,前端表单中的手机号的验证
Excel如何快速验证银行卡号和姓名是否一致？
ffcell2016的博客
03-02 2457
今天跟大家分享一下Excel如何快速验证银行卡号和姓名是否一致？ 1.首先我们打开excel软件，新建一个工作簿点击【DIY工具箱】 2.点击【银行卡】选择【银行卡二三四元素实名认证】 ​ 3.点击【新建】 ​ 4.录入身份证号和姓名 ​ 5.返回上面的对话框，点击【确定】 ​ 6.选择【是】 ​ 7.操作完成验证结果如下图 ...
excel中显示身份证号银行卡卡号
09-26 1617
在工作过程中，经常遇到excel中显示身份证号银行卡卡号。大家都知道，身份证号银行卡卡号在excel中都是科学计数法来显示的，这样显然是不能满足需要的，那么怎么才能宣示出来呢？我个人的总结是：      1、先把对应的列的属性格式修改为文本；      2、然后在输入或者是拷贝进来。这样显示出来的都是文本格式，不会再按科学记数法的形式显示了。 
JavaScript截取手机号码 手机验证 身份证验证等等
05-27
身份证验证涉及到更复杂的校验规则，包括地区代码、出生日期、顺序号和校验码等。以下是一个简单的18位身份证号码验证函数： ```javascript function validateIdCard(id) { const idRegex = /(^\d{15}$)|(^\d{18}$...
银行信用卡申请网站模板
06-24
同时，为了提高表单填写的准确性，可能还包含实时验证功能，如手机号码、身份证号的格式检查，以及邮箱的可用性验证等。 【银行模板】部分，体现了金融业的安全性和严谨性，通常会包含SSL加密技术，保证用户在提交...
APISpace 银行卡四要素标准版 API接口 PHP调用示例代码
05-09
在本例中，我们关注的是“银行卡四要素标准版”API，这是一个用于验证银行卡持有者身份的服务，主要涉及四个关键信息：姓名、身份证号码、银行卡号和手机号。这些信息的验证通常用于金融交易、账户注册等场景，以...
JS 表单验证的15个正则表达式
04-24
5. 银行卡号验证（Luhn算法）： 正则表达式只是初步检查，实际验证还需用Luhn算法，这里仅检查长度和数字组成。 `/^\d{16}$/` 此正则匹配16位的数字字符串，通常用于信用卡号。 6. 身份证号（15位或18位）验证： `/...
Java实现获取银行卡所属银行，验证银行卡号是否正确的方法详解
08-25
主要介绍了Java实现获取银行卡所属银行，验证银行卡号是否正确的方法,结合实例形式详细分析了java判断银行卡归属地及有效性的原理与相关实现技巧,需要的朋友可以参考下
vue中Element-ui 输入银行账号每四位加一个空格的实现代码
12-29
一、问题描述：     我们在输入银行账号会设置每四位添加一个空格，输入金额，每三位添加一个空格。那么，在vue，element-ui 组件中，如何实现呢？ 二、效果图： 三、实现代码： <el prop=account label=银行账号> <template slot-scope=scope> <el-input type=text maxlength=23 v-model=scope.row.account placeholder=请输入银行账号 @change=validateNum(scope.$ind
验证银行卡号输入的正确性
05-12
输入银行卡号的时候，并不是随便的一个卡号都是合法的，必须通过luhn校验
银行卡号校验位的LUHN算法模10“隔位2倍加”校验数的公式
dtm19931001的专栏
06-21 6027
计算LUHN算法模10“隔位2倍加”校验数的公式 　　计算步骤如下： 　　步骤1：从右边第1个数字（低序）开始每隔一位乘以2。 　　步骤2：把在步骤1中获得的乘积的各位数字与原号码中未乘2的各位数字相加。 　　步骤3：从邻近的较高的一个以0结尾的数中减去步骤2中所得到的总和［这相当于求这个总和的低位数字（个位数）的“10的补数”］。如果在步骤2得到的总和是以零结尾的数（
vue 银行卡校验 表单验证
u013361179的博客
12-04 3980
rules: { bankAccount: [{ required: true, trigger: 'blur', validator: bankAccountValid }] } var bankAccountValid = (rule, value, callback) => { const strBin = '10,18,30,35,37,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,58,60,62,65,68,69
js银行卡luhm校验，验证银行卡号并返回开户行（三方插件和在线验证）
zhangxy
08-27 1万+
最近做公司的项目遇到银行卡号匹配开户银行的问题，一开始是正则匹配银行卡号码，开户银行银行自己填写，后来用户又让改，说要自动匹配开户银行，唉，用户都是大哥，让改就要改……话不多说，上代码。 自己寻思了半天，上网看了一些大神的思路，最后做出来，开户银行系统匹配，银行卡号码使用正则来验证，以下添加两种验证方法，在线验证是后来补充的。 方法一：三方插件，可以匹配银行卡号和开户银行 其中要引用两个js...
银行卡号的编码规则及校验
热门推荐
猿人启示录
04-12 4万+
银行卡号的编码规则 银行卡号由最多19位数字组成。 前6位数字被称为发行者识别号码（Issuer Identification Number，缩写为IIN），也称为发卡行识别码（Bank Identification Number，简称BIN），常说的卡BIN就是指它，由中国银联代国内各发卡机构统一向ISO申请。6位IIN的第一位，是主要行业标识符（Major industry identif...
element-ui表单手机号正则
09-06
element-ui表单中手机号的验证规则可以通过自定义校验函数来实现。根据引用和引用的内容，可以得出以下结论： 在模板(template)中，可以通过prop属性指定验证规则的名称，如prop="phone"。在data中，可以定义一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值