devbox
我家小花儿
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：我家小花儿 | 2024-07-25 15:52:03

赞

踩

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

1、表单信息

  1. <body style="background:#fafafa">
  2. <div class="container">
  3. 	<!-- 头部  -->
  4.     <header class="header"> 绑定银行卡</header>
  5.     <!-- 内容  -->
  6. 	<div class="bindcard-error" style="display:none;">xxx数据填写报错提示！</div>
  7. 	
  8. 	<div class="bindcard">
  9. 	    
  10. 		<div class="bindcard-border">
  11. 			<input type="text" id="username" name="AccountName" value="" placeholder="您的真实姓名" />
  12. 		</div>
  13. 		<div class="bindcard-border">
  14. 			<input type="text" id="IdentificationNumber" name="IdentificationNumber" value="" placeholder="您的真实身份证号" />
  15. 		</div>
  16. 		<div class="bindcard-border">
  17. 			<select οnchange=""  name="BankID" id="oldBank" required="required">
  18. 			</select>
  19. 		</div>
  20. 		<div class="bindcard-border">
  21. 			<input type="text" id="AccountNumber" name="AccountNumber" value="" placeholder="请输入银行卡号" />
  22. 		</div>
  23. 		<div class="bindcard-border">
  24. 			<div class="bindcard-border-list">
  25. 			<select οnchange="toggleProvince();"  name="province" id="province" required="required">
  26. 				<option style="color:#787878" value=0>请选择开户行省</option>
  27. 				#{list items:provices, as:'provice'}
  28. 				  <option id="${provice?.id}" value="${provice?.id}" style="color:#787878">${provice?.name}</option>
  29. 				#{/list}
  30. 			</select>
  31. 			<select οnchange=""  name="city" id="city" required="required" >
  32. 				<option style="color:#787878" value=0>请选择开户行市</option>
  33. 			</select>
  34. 			</div>
  35. 		</div>
  36. 		<div class="bindcard-border">
  37. 			<input type="text" id="branch_bank_name" name="branch_bank_name" value="" placeholder="请填写支行名称" />
  38. 		</div>
  39. 		<div class="bindcard-border">
  40. 			<input type="text" id="PhoneNumber" name="PhoneNumber" value="" placeholder="请填写对应银行预留手机号" />
  41. 		</div>
  42. 	#{form @m.front.account.FundsManageAction.verifySMS(), id:'SMSCodeSubmit'}
  43. 		<div class="bindcard-border">
  44. 			<input type="number" id="phoneCode" name="code" value="" placeholder="输入验证码"/>
  45. 			<input type="hidden" id = "randomID" />
  46. 			<a href="javascript:void(0);" id="sendSmsCode" οnclick="sendCode()" >获取验证码</a>
  47. 			<!-- 获取绑定的信息 -->
  48. 			<input type="hidden" id="bindId" name="bindId" />
  49. 		</div>
  50. 		<a class="bindcard-btn"  href="javascript:void(0);" οnclick="bindBankCard();" >绑定</a>
  51. 	</div>
  52. 	#{/form}
  53. </div>
  54. </body>

2、表单验证js代码

  1. <script type="text/javascript">
  2. 		//绑卡验证银行卡是否存在
  3. 		
  4. 	  $(document).ready(function(){
  5. 		  $("#oldBank").click(openBankS());
  6. 	   });
  7. 		// 查询快捷支付银行
  8. 		function openBankS(){
  9. 		     $("#oldBank").html("");
  10. 		     var datasJson1;
  11. 		     $.ajax({
  12. 		         async: false,
  13. 		         type: "get",
  14. 		         dataType: "json",
  15. 		         url: "/m/findBankCode",
  16. 		         success: function (msg) {
  17. 		         	 for(var i=0,l=msg.length;i<l;i++){
  18. 		         		datasJson1+="<option  value="+msg[i].bank_code+">"+msg[i].bank_name+"</option>";
  19. 		          	 } 
  20. 		         	 $("#oldBank").append(datasJson1);
  21. 		         }
  22. 	       });
  23. 		}
  24. 		// 查询省市
  25. 		function toggleProvince(){
  26. 			$("#city").empty();
  27. 			var cityStr = "";
  28. 			var pcode = $("#province").find("option:selected").val();
  29. 			if(!pcode){
  30. 			 return false;
  31. 			}else{
  32. 		 		$.ajax({
  33. 		            async: false,
  34. 		            type: "get",
  35. 		            data:"provinceId="+pcode,
  36. 		            url: '/m/findCityByProvinceId',
  37. 		            success: function (msg) {
  38. 		            	for(var i=0,l=msg.length;i<l;i++){
  39. 		            		cityStr+="<option id='"+msg[i].province_id+"' value='"+msg[0].name+"' style='color:#787878'>"+msg[i].name+"</option>";
  40. 		            	}
  41. 		            	$("#city").append(cityStr);
  42. 		            }
  43. 	        	}); 
  44. 			}
  45. 		}
  46. 		
  47. 		
  48. 	
  49. 		
  50. 		/* function bindBankCard(){
  51. 			$("#SMSCodeSubmit").submit();
  52. 		} */
  53. 		
  54. 		
  55. 		// 验证中文名称
  56. 		function isChinaName(name) {
  57. 		    var pattern = /^[\u4E00-\u9FA5]{1,6}$/;
  58. 		    return pattern.test(name);
  59. 		}
  60. 		// 验证手机号
  61. 		function isPhoneNo(phone) {  
  62. 			var pattern = /^(1[34578]\d{9}$)/; 
  63. 		    return pattern.test(phone);  
  64. 		}
  65.  
  66.  
  67. 		// 验证身份证 
  68. 		function isCardNo(card) {  
  69. 		   var pattern = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;  
  70. 		   return pattern.test(card); 
  71. 		} 
  72. 		// 验证银行卡
  73. 		function isBankNo(card) {  
  74. 			 var pattern = /^([1-9]{1})(\d{14}|\d{18})$/;
  75. 		   return pattern.test(card); 
  76. 		} 
  77. 		//验证手机验证码
  78. 		
  79. 		
  80. 		/*点击时发送短信验证码*/
  81. 		function sendCode(){
  82. 			var PhoneNumber = $.trim($("#PhoneNumber").val());
  83. 			var bankID = $.trim($('#oldBank').val());
  84. 			var AccountName=$.trim($('#username').val());
  85. 			var AccountNumber=$.trim($('#AccountNumber').val());
  86. 			var IdentificationNumber=$.trim($('#IdentificationNumber').val());
  87. 			var province=$('#province').val();;
  88. 			var branch_bank_name=$.trim($('#branch_bank_name').val());
  89.           	var city=$('#city').val();
  90.           	
  91. 			var str = '';
  92. 				
  93. 			    // 判断名称
  94. 			    if(AccountName.length == 0) {
  95. 			        str += '请输入姓名';
  96. 			        $(".bindcard-error").html(str).show();
  97. 			        $('#username').focus();
  98. 			        return;
  99. 			    } 
  100. 			    // 验证身份证
  101. 			    if(IdentificationNumber.length == 0) {  
  102. 			        str += '请输入身份证号码';
  103. 			        $(".bindcard-error").html(str).show();
  104. 			        $('#IdentificationNumber').focus();
  105. 			        return;
  106. 			    } else {
  107. 			        if(isCardNo(IdentificationNumber) == false) {
  108. 			            str += '身份证号格式不正确';
  109. 			            $(".bindcard-error").html(str).show();
  110. 			            $('#IdentificationNumber').focus();
  111. 			            return;
  112. 			        }
  113. 			    }
  114. 			    // 判断开户行
  115. 			    if(bankID == 0) {
  116. 			        str += '请选择开户行';
  117. 			        $(".bindcard-error").html(str).show();
  118. 			        $('#oldBank').focus();
  119. 			        return;
  120. 			    } 
  121. 			    // 判断开户行省
  122. 			    if(province == 0) {
  123. 			        str += '请选择开户行省';
  124. 			        $(".bindcard-error").html(str).show();
  125. 			        $('#province').focus();
  126. 			        return;
  127. 			    } 
  128. 				 // 判断开户行城市
  129. 			    if(city == 0) {
  130. 			        str += '请选择开户行城市';
  131. 			        $(".bindcard-error").html(str).show();
  132. 			        $('#city').focus();
  133. 			        return;
  134. 			    } 
  135. 			    // 判断银行卡号
  136. 			    if (AccountNumber.length == 0) {  
  137. 			        str += '请输入银行卡号';
  138. 			        $(".bindcard-error").html(str).show();
  139. 			        $('#AccountNumber').focus();
  140. 			        return;
  141. 			    } else {
  142. 			        if(isBankNo(AccountNumber) == false) {
  143. 			           str += '银行卡号格式错误';
  144. 			           $(".bindcard-error").html(str).show();
  145. 			           $('#AccountNumber').focus();
  146. 			           return;
  147. 			        }
  148. 			    }
  149. 			    // 判断手机号码
  150. 			    if (PhoneNumber.length == 0) {  
  151. 			        str += '请输入手机号';
  152. 			        $(".bindcard-error").html(str).show();
  153. 			        $('#PhoneNumber').focus();
  154. 			        return;
  155. 			    } else {
  156. 			        if (isPhoneNo(PhoneNumber) == false) {
  157. 			           str += '手机号码格式错误';
  158. 			           $(".bindcard-error").html(str).show();
  159. 			           $('#PhoneNumber').focus();
  160. 			           return;
  161. 			        }
  162. 			    }
  163. 				
  164. 			    // 判断开户行
  165. 			    if (branch_bank_name.length == 0) {  
  166. 			        str += '请輸入支行名称';
  167. 			        $(".bindcard-error").html(str).show();
  168. 			        $('#branch_bank_name').focus();
  169. 			        return;
  170. 			    } 
  171. 				
  172. 			    
  173.  
  174.  
  175. 			   /*  // 验证地址
  176. 			    if($.trim($('#address').val()).length == 0) {  
  177. 			        str += '地址没有输入\n';
  178. 			        $('#address').focus();
  179. 			    } */
  180.  
  181.  
  182. 			    // 如果没有错误则显示
  183. 			    if($.trim(str) != '') {
  184. 			        $(".bindcard-error").html(str).show();
  185. 			        return;
  186. 			    } else {
  187. 			    	$(".bindcard-error").hide();					
  188. 				}
  189. 			    
  190. 			    
  191. 			    $.ajax({
  192. 					url:"@{m.front.account.FundsManageAction.getSMSCode()}",
  193. 					data:{
  194. 						"PhoneNumber":PhoneNumber,
  195. 						"bankID":bankID,
  196. 						"AccountName":AccountName,
  197. 						"AccountNumber":AccountNumber,
  198. 						"IdentificationNumber":IdentificationNumber,
  199. 						"province":province,
  200. 						"branch_bank_name":branch_bank_name,
  201. 						"city":city
  202. 					},
  203. 					dataType:"json",
  204. 					type:"post",
  205. 					success:function(result){
  206. 						if(result.success==true){
  207. 							countDown();
  208. 							$("#bindId").val(result.bankaccount.id);
  209. 						}
  210. 						if(result.success==false){
  211. 							$(".bindcard-error").html(result.errorMsg).show();
  212. 							return;
  213. 						}
  214. 						
  215. 						
  216. 						
  217. 					}
  218. 					});
  219. 			    }			
  220. 			    
  221. 		
  222. 		var remain = 90;
  223. 		/*点击发送短信验证码后倒计时*/
  224. 		function countDown() {
  225. 		   if (remain == 0) {
  226. 			   remain = 90;
  227. 			   $("#sendSmsCode").html("点击发送");
  228. 			   $("#sendSmsCode").attr("onclick", "sendCode();");
  229. 			   $("#sendSmsCode").attr("style", "cursor:pointer");
  230. 			   return;
  231. 		   }
  232.  
  233.  
  234. 		   $("#sendSmsCode").html("" + remain-- + "秒后重发");
  235. 		   setTimeout("countDown()",1000);
  236. 		}
  237. 		// 绑卡
  238. 		function bindBankCard() {
  239. 			var phoneCode=$.trim($('#phoneCode').val());
  240. 			// 判断验证码
  241. 			var str="";
  242. 		    if (phoneCode.length == 0) {
  243. 		        str += '请輸入验证码';
  244. 		        $(".bindcard-error").html(str).show();
  245. 		        $('#phoneCode').focus();
  246. 		        return;
  247. 		    }
  248. 		    $("#SMSCodeSubmit").submit();
  249. 		}
</script>

源码：





声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/881037
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号