欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery实现18位身份证输入隔位添加空格及格式验证

程序员文章站 2022-03-18 16:27:51
jQuery实现身份证输入添加空格 表单验证身份证输入,并且输入时前6位添加一个空格,中间8位后添加一个空格,及身份证格式验证 参考:基于jquery实现的银行卡号每隔4位自动插入空格的实现代码 参考网址: http://www.jb51.net/article/97966.html 源码代码如下: ......

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

参考:基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
参考网址:  http://www.jb51.net/article/97966.html
源码代码如下:
 
 
 
 
 
 
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>