说明: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. php验证18位身份证,准到必须输入正确的身份证号,

    /** * 验证18位身份证(计算方式在百度百科有) * @param string $id 身份证 * return boolean */ function check_identity($id=' ...

  3. 18位身份证验证--java实现,正则表达式

    简单的正则表达式: (1)preg_match("/^(\d{18,18}|\d{15,15}|\d{17,17}x)$/",$id_card)(2)preg_match(&quo ...

  4. iOS 身份证最后一位是X,输入17位后自动补全X(转)

    非原创,转载自http://blog.csdn.net/l2i2j2/article/details/51542028如果身份证最后一位是X,输入17位后自动补全X// textField代理方法 - ...

  5. js验证15位或18位身份证

    本篇文章是本人在网上搜集了一些验证,然后又个人进行一定修改的关于身份证的验证,欢迎修改指正..... function IdCardValidateRule(idCard) { var tip;    ...

  6. Java实现18位身份证校验代码

    import java.util.Scanner; /** * 18位身份证校验 * @author [J.H] * */ public class Test { // 身份证校验 public st ...

  7. Java随机生成18位身份证号

    package com.ihome.data; import java.text.SimpleDateFormat; import java.util.Calendar; import java.ut ...

  8. C#实现的18位身份证格式验证算法

    18位身份证标准在国家质量技术监督局于1999年7月1日实施的GB11643-1999<公民身份号码>中做了明确的规定. GB11643-1999<公民身份号码>为GB1164 ...

  9. 身份证号码15位转18位 C#实现

    [身份证最后一位神秘X的由来]身份证中的“冷知识”1999年的今天,<国务院关于实行公民身份号码制度的决定>被发布,当年10月1日实施.为什么有的有X?这位数是根据前17位计算出的校验码. ...

随机推荐

  1. P5038 [SCOI2012]奇怪的游戏 二分+网络流

    $ \color{#0066ff}{ 题目描述 }$ Blinker最近喜欢上一个奇怪的游戏. 这个游戏在一个 \(N \times M\) 的棋盘上玩,每个格子有一个数.每次\(Blinker\)会 ...

  2. HTML-利用CSS和JavaScript制作一个切换图片的网页

    由于个人原因,不详细写步骤 思路: 一.布局 二.制作图片区和按钮区的div及颜色.边框.背景属性等 三.用PS将四张图片剪切到同一个尺寸,重叠放置在图片切换区,透明度设置为0 四.点击对应按钮时,将 ...

  3. Compile Groovy/Spock with GMavenPlus

    在之前的博文里曾使用GMaven插件编译Groovy/Spock,这次使用GMavenplus插件,更加方便. 具体步骤 1. 导入Spock和Groovy依赖 <dependency> ...

  4. mysql 2006 go away 错误

    https://blog.csdn.net/yypsober/article/details/71330673 原文地址.

  5. 初级算法49题 — LeetCode(20181122 - )

    Array: Single Number class Solution { public int singleNumber(int[] nums) { if (nums == null || nums ...

  6. json操作相关记录

    json是javascript衍生的数据表示法,现在许多数据的处理都使用json. 平时用到的与json结构相似的有很多,如mongodb数据库,python的字典等.核心思想就是键值对. json的 ...

  7. $bzoj1025-SCOI2009$游戏 群论 $dp$

    题面描述 \(windy​\)学会了一种游戏.对于\(1​\)到\(N​\)这\(N​\)个数字,都有唯一且不同的1到N的数字与之对应.最开始\(windy​\)把数字按顺序\(1,2,3,\cdot ...

  8. lua路径问题

    方法1:lua进行require绝对路径时,会从package.path中进行遍历 print(package.path)会得到类似下面的结果: --> "lualibs/p4ulib ...

  9. linux vi文本编辑器三种模式切换及常用操作

    初学者刚进入vi不要乱点键盘,vi的三种模式和各种命令很容易弄混@@ vi编辑器是Unix系统最初的编辑器.它使用控制台图形模式来模拟文本编辑窗口,允许查看文件中的行.在文件中移动.插入.编辑和替换文 ...

  10. pandas中数据框的一些常见用法

    1.创建数据框或读取外部csv文件 创建数据框数据 """ 设计数据 """ import pandas as pd data = {&qu ...