说明：jQuery实现身份证输入添加空格，表单验证身份证输入，并且输入时前6位添加一个空格，中间8位后添加一个空格,及身份证格式验证

参考：基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
源码代码如下:
 
 
 
 
 
 
 
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
7
  <title>Document</title>
8
  <script type="text/javascript" src="js/jquery-3.2.1.js"></script>
9
  <style>
10
    .box {
11
      width: 500px;
12
      text-align: center;
13
      margin: 0 auto;
14
    }
15








16




    .box button {








17




      margin: 20px auto;








18




    }








19












20




    .box .error {








21




      color: red;








22




    }








23




  </style>








24




</head>








25




<body>








26




  <div class="box">








27




    <form>








28




      <label for="card">身份证号：</label>








29




      <input type="text" name="card" id="card" value="" maxlength="20">








30




      <span class="error"></span>








31




      <br>








32




      <button type="button">提交</button>








33




    </form>








34




  </div>








35




</body>








36




<script type="text/javascript">








37




  $(function () {








38




    //键盘弹起








39




    $('#card').on('keyup', function (e) {








40




      if ((e.which >= 48 && e.which <= 57) ||








41




        (e.which >= 96 && e.which <= 105) || e.which == 88) {








42




        $('.error').text('');








43




        //获取当前光标的位置








44




        var caret = this.selectionStart;








45




        //获取当前的value








46




        var value = this.value;








47




        //从左边沿到坐标之间的空格数








48




        var sp = (value.slice(0, caret).match(/\s/g) || []).length;








49




        //去掉所有空格








50




        var nospace = value.replace(/\s/g, '');








51




        //重新插入空格








52




        var curVal = this.value = nospace.replace(/(^(\d{6})|(\d{8}))(?=[^\s])/g, "$1 ").trim();








53




        //从左边沿到原坐标之间的空格数








54




        var curSp = (curVal.slice(0, caret).match(/\s/g) || []).length








55




        //修正光标位置








56




        this.selectionEnd = this.selectionStart = caret + curSp - sp








57




      } else {








58




        $('.error').text('只能输入数字或X、x');








59




      }








60




    });








61




    //失去焦点








62




    $("#card").on('blur', function () {








63




      //验证身份证号








64




      var value = $(this).val();








65




      var val = value.replace(/\s/ig, ""); //去除空格








66




      console.log(val);








67




      var pattern = /(^\d{18}$)|(^\d{17}(\d|X|x)$)/;








68




      if (pattern.test(val) == false) {








69




        $('.error').text('身份证号码格式不正确');








70




      } else {








71




        $('.error').text();








72




      }








73




    });








74












75




    $("button").on('click', function () {








76




      var value = $('#card').val();








77




      var card = value.replace(/\s/ig, ""); //去除空格








78




      if (card == '') {








79




        $('.error').text('身份证号码不能为空');








80




      } else {








81




        alert(card);








82




        $.post({








83




          url: "form.php",








84




          data: { "card": card }








85




        });








86




      }








87




    });








88




  });






 


 




89




</script>








90




</html>














 


 








 span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }.cm-searching {background: #ffa; background: rgba(255, 255, 0, .4);}.cm-force-border { padding-right: .1px; }@media print {  .CodeMirror div.CodeMirror-cursors {visibility: hidden;}}.cm-tab-wrap-hack:after { content: ""; }span.CodeMirror-selectedtext { background: none; }.CodeMirror-activeline-background, .CodeMirror-selected {transition: visibility 0ms 100ms;}.CodeMirror-blur .CodeMirror-activeline-background, .CodeMirror-blur .CodeMirror-selected {visibility:hidden;}.CodeMirror-blur .CodeMirror-matchingbracket {color:inherit !important;outline:none !important;text-decoration:none !important;}

-->

 span::selection, .cm-s-monokai .CodeMirror-line > span > span::selection { background: rgba(73, 72, 62, .99); }.cm-s-monokai .CodeMirror-line::-moz-selection, .cm-s-monokai .CodeMirror-line > span::-moz-selection, .cm-s-monokai .CodeMirror-line > span > span::-moz-selection { background: rgba(73, 72, 62, .99); }.cm-s-monokai .CodeMirror-gutters { background: #272822; border-right: 0px; }.cm-s-monokai .CodeMirror-guttermarker { color: white; }.cm-s-monokai .CodeMirror-guttermarker-subtle { color: #d0d0d0; }.cm-s-monokai .CodeMirror-linenumber { color: #d0d0d0; }.cm-s-monokai .CodeMirror-cursor { border-left: 1px solid #f8f8f0; }.cm-s-monokai span.cm-comment { color: #75715e; }.cm-s-monokai span.cm-atom { color: #ae81ff; }.cm-s-monokai span.cm-number { color: #ae81ff; }.cm-s-monokai span.cm-property, .cm-s-monokai span.cm-attribute { color: #a6e22e; }.cm-s-monokai span.cm-keyword { color: #f92672; }.cm-s-monokai span.cm-builtin { color: #66d9ef; }.cm-s-monokai span.cm-string { color: #e6db74; }.cm-s-monokai span.cm-variable { color: #f8f8f2; }.cm-s-monokai span.cm-variable-2 { color: #9effff; }.cm-s-monokai span.cm-variable-3 { color: #66d9ef; }.cm-s-monokai span.cm-def { color: #fd971f; }.cm-s-monokai span.cm-bracket { color: #f8f8f2; }.cm-s-monokai span.cm-tag { color: #f92672; }.cm-s-monokai span.cm-header { color: #ae81ff; }.cm-s-monokai span.cm-link { color: #ae81ff; }.cm-s-monokai span.cm-error { background: #f92672; color: #f8f8f0; }.cm-s-monokai .CodeMirror-activeline-background { background: #373831; }.cm-s-monokai .CodeMirror-matchingbracket {text-decoration: underline; color: white !important;}

-->

 li {list-style-type:decimal;}ol.wiz-list-level2 > li {list-style-type:lower-latin;}ol.wiz-list-level3 > li {list-style-type:lower-roman;}blockquote {padding:0 12px;padding:0 0.75rem;}blockquote > :first-child {margin-top:0;}blockquote > :last-child {margin-bottom:0;}img {border:0;max-width:100%;height:auto !important;margin:2px 0;}table {border-collapse:collapse;border:1px solid #bbbbbb;}td, th {padding:4px 8px;border-collapse:collapse;border:1px solid #bbbbbb;min-height:28px;word-break:break-all;box-sizing: border-box;}.wiz-hide {display:none !important;}

-->
												


											
jQuery实现18位身份证输入隔位添加空格及格式验证的更多相关文章
	

    
								
  1. ios-为银行卡号格式化 每隔四位添加一个空格
		
    -(NSString *)formatterBankCardNum:(NSString *)string { NSString *tempStr=string; NSInteger size =(te ...
    
		
    2. 
						
  2. php验证18位身份证，准到必须输入正确的身份证号，
		
    /** * 验证18位身份证(计算方式在百度百科有) * @param string $id 身份证 * return boolean */ function check_identity($id=' ...
    
		
    3. 
						
  3. 18位身份证验证--java实现，正则表达式
		
    简单的正则表达式: (1)preg_match("/^(\d{18,18}|\d{15,15}|\d{17,17}x)$/",$id_card)(2)preg_match(&quo ...
    
		
    4. 
						
  4. iOS  身份证最后一位是X，输入17位后自动补全X（转）
		
    非原创,转载自http://blog.csdn.net/l2i2j2/article/details/51542028如果身份证最后一位是X,输入17位后自动补全X// textField代理方法 - ...
    
		
    5. 
						
  5. js验证15位或18位身份证
		
    本篇文章是本人在网上搜集了一些验证,然后又个人进行一定修改的关于身份证的验证,欢迎修改指正..... function IdCardValidateRule(idCard) { var tip;    ...
    
		
    6. 
						
  6. Java实现18位身份证校验代码
		
    import java.util.Scanner; /** * 18位身份证校验 * @author [J.H] * */ public class Test { // 身份证校验 public st ...
    
		
    7. 
						
  7. Java随机生成18位身份证号
		
    package com.ihome.data; import java.text.SimpleDateFormat; import java.util.Calendar; import java.ut ...
    
		
    8. 
						
  8. C#实现的18位身份证格式验证算法
		
    18位身份证标准在国家质量技术监督局于1999年7月1日实施的GB11643-1999<公民身份号码>中做了明确的规定. GB11643-1999<公民身份号码>为GB1164 ...
    
		
    9. 
						
  9. 身份证号码15位转18位 C#实现
		
    [身份证最后一位神秘X的由来]身份证中的“冷知识”1999年的今天,<国务院关于实行公民身份号码制度的决定>被发布,当年10月1日实施.为什么有的有X?这位数是根据前17位计算出的校验码. ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 51nod 1943 联通期望 题解【枚举】【二进制】【概率期望】【DP】
			
    集合统计类期望题目. 题目描述 在一片大海上有 \(n\) 个岛屿,规划建设 \(m\) 座桥,第i座桥的成本为 \(z_i\),但由于海怪的存在,第 \(i\) 座桥有 \(p_i\) 的概率不能建 ...
    
			
    2. 
						
  2. JSON 请求太大，无法反序列化。
			
    在post请求中数据太大导致报500错误.错误提示 JSON 请求太大,无法反序列化. 在config中加 <system.web.extensions> <scripting> ...
    
			
    3. 
						
  3. DB link的迁移
			
    我们在做某些Schema的迁移的时候,由于用到Public的db link,然而由于不知道db link中目标端账号的密码,因此无法在新环境重新创建DB link. 本次实验的思路是将视图dba_db ...
    
			
    4. 
						
  4. CSS中margin属性
			
    css中margin块级元素的垂直相邻外边距会合并,比如 方框的上下外边距并不是2px,而是合并为1px了. 设置float属性就可以避免这种同级元素边距合并
    
			
    5. 
						
  5. 2016424王启元 Exp3免杀原理与实现
			
    基础问题回答 1.杀软是如何检测出恶意代码的? (1)基于特征码的检测 特征码是能识别一个程序是一个病毒的一段不大于64字节的特征串.如果一个可执行文件包含这样的特征码则被杀毒软件检测为是恶意代码.  ...
    
			
    6. 
						
  6. PyCharm | 常见问题
			
    1.安装使用 每次建立PyCharm工程都建立一个虚拟环境env,需要重新下载或复制模块
    
			
    7. 
						
  7. spring.net AOP
			
    AOP 术语 通知(Advice): 通知描述了切面要完成的任务,同时还描述了何时执行这个任务. 连接点(Joinpoint):  程序中应用通知的地方称为连接点,这个点可以是方法被调用时,异常抛出时 ...
    
			
    8. 
						
  8. sql server取某个时间段内所有日期或者所有月份
			
    取所有月份: declare @begin datetime,@end datetime set @begin='2015-2-6' set @end='2015-12-2' declare @mon ...
    
			
    9. 
						
  9. (转)expect命令脚本语言介绍及生产实践
			
    原文:http://www.fblinux.com/?p=526 Expect介绍 expect是一个用来实现自动交互功能的软件套件,是用来实现自动和交互式任务程序进行通信,无需人的手工干预.比如SS ...
    
			
    10. 
						
  10. springboot整合spring data jpa 动态查询
			
    Spring Data JPA虽然大大的简化了持久层的开发,但是在实际开发中,很多地方都需要高级动态查询,在实现动态查询时我们需要用到Criteria API,主要是以下三个: 1.Criteria  ...
    
			
    11.