1. Python技术站首页
  2. node js

JS实现的检验身份证格式并输出出生日期，年龄，性别，出生地示例

• node js

为了清晰地演示实现身份证格式验证、输出出生日期、性别、年龄和出生地的功能，我将提供以下步骤：

步骤一：获取用户输入的身份证号码

首先，我们需要通过HTML页面的HTML元素（例如用户输入框）来获取用户输入的身份证号码。我们可以使用类似以下的代码来完成这个步骤：

<input type="text" id="idCard" placeholder="请输入身份证号码" />

步骤二：验证身份证格式

接下来，我们需要对用户输入的身份证格式进行验证，以确保其符合中国的身份证数字正则表达式。我们可以使用JavaScript的正则表达式来完成这个步骤。以下是一个示例的函数来实现这个功能：

function checkIdCard(idCard) {
  // 根据规则验证身份证号码是否符合格式要求
  var reg = /(^\d{15}$)|(^\d{17}([0-9]|X)$)/;
  if (reg.test(idCard) === false) {
    alert("身份证号码格式不正确");
    return false;
  }
  return true;
}

当用户输入错误格式的身份证号码时，会弹出窗口提示用户重新输入。

步骤三：获取出生日期、性别和出生地

接下来，我们需要使用JavaScript获取输入的身份证号码，并从中提取出正确的出生日期、性别和出生地。以下是一个示例的函数来实现这个功能：

function getIdCardInfo(idCard) {
  var info = {
    birthday: "",
    sex: "",
    region: ""
  };
  if (idCard.length == 15) {
    //获取出生日期
    info.birthday =
      "19" +
      idCard.charAt(6) +
      idCard.charAt(7) +
      "-" +
      idCard.charAt(8) +
      idCard.charAt(9) +
      "-" +
      idCard.charAt(10) +
      idCard.charAt(11);

    //获取性别
    if (parseInt(idCard.charAt(14)) % 2 == 0) {
      info.sex = "女";
    } else {
      info.sex = "男";
    }

    //获取出生地
    info.region = idCard.substr(0, 6);
  } else if (idCard.length == 18) {
    //获取出生日期
    info.birthday =
      idCard.charAt(6) +
      idCard.charAt(7) +
      idCard.charAt(8) +
      idCard.charAt(9) +
      "-" +
      idCard.charAt(10) +
      idCard.charAt(11) +
      "-" +
      idCard.charAt(12) +
      idCard.charAt(13);

    //获取性别
    if (parseInt(idCard.charAt(16)) % 2 == 0) {
      info.sex = "女";
    } else {
      info.sex = "男";
    }

    //获取出生地
    info.region = idCard.substr(0, 6);
  }
  return info;
}

步骤四：计算年龄

最后，我们需要使用JavaScript计算出输入的身份证号码对应的年龄。以下是一个示例的函数来实现这个功能：

function getAge(idCard) {
  var birthday = getIdCardInfo(idCard).birthday;
  var birthDate = new Date(birthday);
  var nowDate = new Date();
  var age = nowDate.getFullYear() - birthDate.getFullYear();
  if (
    nowDate.getMonth() < birthDate.getMonth() ||
    (nowDate.getMonth() == birthDate.getMonth() &&
      nowDate.getDate() < birthDate.getDate())
  ) {
    age--;
  }
  return age;
}

示例说明

以下是一个完整的示例，在用户在输入框中输入身份证号码后，它将会通过JavaScript对身份证号码格式进行验证，如果验证通过，就会输出用户的出生日期、年龄、性别和出生地。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>身份证格式验证</title>
  </head>
  <body>
    <input type="text" id="idCard" placeholder="请输入身份证号码" />
    <button onclick="getIDCard()">提交</button>
    <div id="result"></div>
  </body>
  <script>
    function checkIdCard(idCard) {
      var reg = /(^\d{15}$)|(^\d{17}([0-9]|X)$)/;
      if (reg.test(idCard) === false) {
        alert("身份证号码格式不正确");
        return false;
      }
      return true;
    }

    function getIdCardInfo(idCard) {
      var info = {
        birthday: "",
        sex: "",
        region: ""
      };
      if (idCard.length == 15) {
        info.birthday =
          "19" +
          idCard.charAt(6) +
          idCard.charAt(7) +
          "-" +
          idCard.charAt(8) +
          idCard.charAt(9) +
          "-" +
          idCard.charAt(10) +
          idCard.charAt(11);

        if (parseInt(idCard.charAt(14)) % 2 == 0) {
          info.sex = "女";
        } else {
          info.sex = "男";
        }

        info.region = idCard.substr(0, 6);
      } else if (idCard.length == 18) {
        info.birthday =
          idCard.charAt(6) +
          idCard.charAt(7) +
          idCard.charAt(8) +
          idCard.charAt(9) +
          "-" +
          idCard.charAt(10) +
          idCard.charAt(11) +
          "-" +
          idCard.charAt(12) +
          idCard.charAt(13);

        if (parseInt(idCard.charAt(16)) % 2 == 0) {
          info.sex = "女";
        } else {
          info.sex = "男";
        }

        info.region = idCard.substr(0, 6);
      }
      return info;
    }

    function getAge(idCard) {
      var birthday = getIdCardInfo(idCard).birthday;
      var birthDate = new Date(birthday);
      var nowDate = new Date();
      var age = nowDate.getFullYear() - birthDate.getFullYear();
      if (
        nowDate.getMonth() < birthDate.getMonth() ||
        (nowDate.getMonth() == birthDate.getMonth() &&
          nowDate.getDate() < birthDate.getDate())
      ) {
        age--;
      }
      return age;
    }

    function getIDCard() {
      var idCard = document.getElementById("idCard").value;
      if (checkIdCard(idCard) === true) {
        var info = getIdCardInfo(idCard);
        var age = getAge(idCard);
        var result =
          "出生日期：" +
          info.birthday +
          "<br> 性别：" +
          info.sex +
          "<br> 年龄：" +
          age +
          "<br> 出生地：" +
          info.region;
        document.getElementById("result").innerHTML = result;
      }
    }
  </script>
</html>

再看一个手机H5页面实现的身份证信息显示案例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
  <meta http-equiv="cache-control" content="no-cache"/>
  <meta http-equiv="pragma" content="no-cache"/>
  <meta http-equiv="expires" content="0"/>
  <title>身份证信息查询</title>
  <style>
      body,html,div{
          margin: 0;
          padding: 0;
          width: 100%;
          height: 100%;
          font-size: 16px;
          overflow: hidden;
      }
      h1,h2,h3{
          text-align: center;
          margin-top: 15px;
      }
      #idCard{
          width: 100%;
          height: 20%;
          padding-top: 20%;
          text-align: center;
          font-size: 20px;
          background-color: white;
      }
      #result{
          text-align: center;
          font-size: 16px;
          margin:15px;
          line-height:20px;
      }
  </style>
</head>
<body>
<h1>身份证信息查询</h1>
<input type="text" id="idCard" placeholder="点击此处输入身份证号码" />
<div id="result"></div>

<script>
    function checkIdCard(idCard) {
        var reg = /(^\d{15}$)|(^\d{17}([0-9]|X)$)/;
        if (reg.test(idCard) === false) {
            alert("身份证号码格式不正确");
            return false;
        }
        return true;
    }

    function getIdCardInfo(idCard) {
        var info = {
            birthday: "",
            sex: "",
            region: ""
        };
        if (idCard.length == 15) {
            info.birthday = "19" + idCard.charAt(6) + idCard.charAt(7) + "-" + idCard.charAt(8) + idCard.charAt(9) + "-" + idCard.charAt(10) + idCard.charAt(11);
            if (parseInt(idCard.charAt(14)) % 2 == 0) {
                info.sex = "女";
            } else {
                info.sex = "男";
            }
            info.region = idCard.substr(0, 6);
        } else if (idCard.length == 18) {
            info.birthday = idCard.charAt(6) + idCard.charAt(7) + idCard.charAt(8) + idCard.charAt(9) + "-" + idCard.charAt(10) + idCard.charAt(11) + "-" + idCard.charAt(12) + idCard.charAt(13);
            if (parseInt(idCard.charAt(16)) % 2 == 0) {
                info.sex = "女";
            } else {
                info.sex = "男";
            }
            info.region = idCard.substr(0, 6);
        }
        return info;
    }

    function getAge(idCard) {
        var birthday = getIdCardInfo(idCard).birthday;
        var birthDate = new Date(birthday);
        var nowDate = new Date();
        var age = nowDate.getFullYear() - birthDate.getFullYear();
        if (nowDate.getMonth() < birthDate.getMonth() || (nowDate.getMonth() == birthDate.getMonth() && nowDate.getDate() < birthDate.getDate())) {
            age--;
        }
        return age;
    }

    function getIDCard() {
        var idCard = document.getElementById("idCard").value;
        if (checkIdCard(idCard) === true) {
            var info = getIdCardInfo(idCard);
            var age = getAge(idCard);
            var result = "出生日期：" + info.birthday + "\n 性别：" + info.sex + "\n 年龄：" + age + "\n 出生地：" + info.region;
            document.getElementById("result").innerHTML = result;
        }
    }

    document.getElementById("idCard").addEventListener("click", function(){
        document.getElementById('idCard').setAttribute('type', 'number');
        document.getElementById('idCard').focus();
        document.getElementById('idCard').addEventListener('blur', function(){
            document.getElementById('idCard').setAttribute('type', 'text');
        });
    });
    document.getElementById("idCard").addEventListener("keyup", function(event) {
        if (event.keyCode === 13) {
            getIDCard();
        }
    });
</script>
</body>
</html>

这个示例与前面的示例不同在于：

  1. 输入框是可点击（默认为文本输入）的，点击时将弹出数字键盘（type为number），输入完成后失去焦点自动变成文本输入，避免出现奇怪的闪烁效果；
  2. 绑定了keyup事件，在输入完身份证号码后敲下enter键即可提交。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS实现的检验身份证格式并输出出生日期，年龄，性别，出生地示例 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年6月8日
下一篇 2023年6月8日

相关文章

  • 微信小程序云函数添加数据到数据库的方法

    当我们希望在微信小程序中将数据存储到数据库中时，可以通过微信小程序的云开发来实现。具体来说，我们可以通过云函数来操作数据库。下面是添加数据到数据库的方法： 创建云函数 我们首先需要在小程序云开发控制台中创建一个云函数。可以使用命令行工具或者在控制台中手动创建云函数。对于初学者，建议使用控制台创建云函数。创建成功后，即可在 “cloudfunctions” 中…

    node js 2023年6月8日
    00

  • javascript实现小型区块链功能

    下面将为您详细讲解“JavaScript实现小型区块链功能”的完整攻略。 一、理解区块链的基本概念 区块链是一种颠覆式的技术，其基本特点是去中心化、公开透明、不可篡改。区块链由多个区块组成，每个区块都包含一组交易记录，每个区块通过加密方式与前一个区块连接形成区块链。区块链内的交易记录是公开透明的，区块链上的记录不可删除，也不可篡改。 二、JavaScript…

    node js 2023年6月8日
    00

  • Nodejs基于LRU算法实现的缓存处理操作示例

    下面是详细的讲解，包括Nodejs基于LRU算法实现的缓存处理操作示例的完整攻略及两条示例说明： Nodejs基于LRU算法实现的缓存处理操作示例 什么是LRU算法？ LRU是Least Recently Used的缩写，即最近最少使用算法。实际上LRU算法是一种缓存淘汰策略，常用于缓存系统中，其实现的思路是基于“使用长时间久`”的原则，当缓存空间不足时，会…

    node js 2023年6月8日
    00

  • NodeJs使用webpack打包项目的方法详解

    下面是“NodeJs使用webpack打包项目的方法详解”的完整攻略： 简介 本文将详细介绍如何使用Webpack打包Node.js项目。Webpack是一个模块打包工具，支持CommonJS、AMD、ES Module等多种模块化开发规范。在Node.js项目中使用Webpack可以将项目中的模块打包成一个或者多个代码块(bundle)，通过工具实现模块化…

    node js 2023年6月8日
    00

  • 浅析node连接数据库（express+mysql）

    下面我将详细讲解“浅析node连接数据库（express+mysql）”的完整攻略。 1. 什么是Node连接数据库 在使用Node.js搭建Web服务器时，经常需要与数据库进行交互，用来操作数据库的MySQL数据库是目前最为流行的开源数据库之一。Node.js通过库文件mysqljs来实现对MySQL数据库的连接和操作。 2. 使用Node连接MySQL数…

    node js 2023年6月8日
    00

  • 深入浅析NodeJs并发异步的回调处理

    深入浅析NodeJS并发异步的回调处理 什么是NodeJS的并发异步 NodeJS是一种基于V8引擎的JavaScript运行环境，其最大的特性就是异步事件驱动I/O模型。它可以在单线程环境下运行处理大量并发请求，而不会造成阻塞。 在NodeJS中，异步回调函数是一个非常重要的概念。它将请求提交给事件循环队列，当队列中的事件处理完成后，异步回调函数会被调用。…

    node js 2023年6月8日
    00

  • Node做中转服务器转发接口

    下面是“Node做中转服务器转发接口”的完整攻略。 什么是中转服务器 中转服务器是指通过一个服务器作为中间人，将客户端请求转发给另一个服务器的过程。在实际应用中，常用于解决跨越、跨域问题，或者将请求分发给多台服务器进行负载均衡等场景。 Node作为中转服务器 Node.js提供了一种快速、简单地创建HTTP/HTTPS服务器的方式，这使它成为一个非常适合作为…

    node js 2023年6月8日
    00

  • Node.js 基础教程之全局对象

    下面是针对“Node.js 基础教程之全局对象”的完整攻略。 全局对象 在Node.js中，有一个名为“全局对象”的概念，它是一个拥有所有全局属性和方法的对象，也就是说，在Node.js中，我们可以直接通过全局对象来访问这些属性和方法。在众多的全局对象中，我们最常用的是： console：控制台对象，用于输出各种类型的信息。 process：进程对象，用于处…

    node js 2023年6月8日
    00
合作推广
合作推广
分享本页
返回顶部