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

最新推荐文章于 2024-06-10 21:57:03 发布

weixin_30586085

最新推荐文章于 2024-06-10 21:57:03 发布

阅读量582

点赞数

文章标签： javascript php ViewUI

原文链接：http://www.cnblogs.com/tonysmile/p/8427526.html

版权

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

参考：基于jquery实现的银行卡号每隔4位自动插入空格的实现代码

参考网址： http://www.jb51.net/article/97966.html

源码代码如下:

       
   

       
   

            
        

            
        

            
        

             
         
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script type="text/javascript" src="js/jquery-3.2.1.js"></script>
  <style>
    .box {
      width: 500px;
      text-align: center;
      margin: 0 auto;
    }
    .box button {
      margin: 20px auto;
    }
    .box .error {
      color: red;
    }
  </style>
</head>
<body>
  <div class="box">
    <form>
      <label for="card">身份证号：</label>
      <input type="text" name="card" id="card" value="" maxlength="20">
      <span class="error"></span>
      <br>
      <button type="button">提交</button>
    </form>
  </div>
</body>
<script type="text/javascript">
  $(function () {
    //键盘弹起
    $('#card').on('keyup', function (e) {
      if ((e.which >= 48 && e.which <= 57) ||
        (e.which >= 96 && e.which <= 105) || e.which == 88) {
        $('.error').text('');
        //获取当前光标的位置
        var caret = this.selectionStart;
        //获取当前的value
        var value = this.value;
        //从左边沿到坐标之间的空格数
        var sp = (value.slice(0, caret).match(/\s/g) || []).length;
        //去掉所有空格
        var nospace = value.replace(/\s/g, '');
        //重新插入空格
        var curVal = this.value = nospace.replace(/(^(\d{6})|(\d{8}))(?=[^\s])/g, "$1 ").trim();
        //从左边沿到原坐标之间的空格数
        var curSp = (curVal.slice(0, caret).match(/\s/g) || []).length
        //修正光标位置
        this.selectionEnd = this.selectionStart = caret + curSp - sp
      } else {
        $('.error').text('只能输入数字或X、x');
      }
    });
    //失去焦点
    $("#card").on('blur', function () {
      //验证身份证号
      var value = $(this).val();
      var val = value.replace(/\s/ig, ""); //去除空格
      console.log(val);
      var pattern = /(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
      if (pattern.test(val) == false) {
        $('.error').text('身份证号码格式不正确');
      } else {
        $('.error').text();
      }
    });
    $("button").on('click', function () {
      var value = $('#card').val();
      var card = value.replace(/\s/ig, ""); //去除空格
      if (card == '') {
        $('.error').text('身份证号码不能为空');
      } else {
        alert(card);
        $.post({
          url: "form.php",
          data: { "card": card }
        });
      }
    });
  });

              
          
</script>
</html>

        
    

        
    

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

weixin_30586085

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现18位身份证输入隔位添加空格及格式验证

说明：jQuery实现身份证输入添加空格，表单验证身份证输入，并且输入时前6位添加一个空格，中间8位后添加一个空格,及身份证格式验证参考：基于jquery实现的银行卡号每隔4位自动插入空格的实现代码参考网址： http://www.jb51.net/article/97966.html 源码代码如下:...
复制链接

扫一扫