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

说明: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>
 
 

转载于:https://www.cnblogs.com/tonysmile/p/8427526.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值