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

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

• node js
yizhihongxing

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

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

首先，我们需要通过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日

相关文章

  • node.js express框架实现文件上传与下载功能实例详解

    标题: Node.js Express框架实现文件上传与下载功能详解 简介 在现代Web开发中，文件上传与下载是非常常见的功能。本文将介绍如何使用Node.js与Express框架实现文件上传与下载功能。 实现文件上传功能 要实现文件上传功能，需要安装并使用第三方库multer，它是一个Node.js中间件，用于处理星形数据的公式。代码示例如下所示： con…

    node js 2023年6月8日
    00

  • node.js实现的装饰者模式示例

    下面是如何实现“node.js装饰者模式示例”的攻略。 什么是装饰者模式 装饰者模式是一种结构设计模式，经常用于在不修改现有对象的情况下，向其添加操作。这种模式可帮助拆分逻辑，使其更加可重用。在装饰者模式中，新的功能是通过将其添加到源对象上而非继承方式来实现的。 装饰者模式的实现 下面是一个实现装饰者模式的示例： // 创建一个简单的对象 const som…

    node js 2023年6月8日
    00

  • node中http模块的使用及执行流程

    当我们需要在node应用中进行HTTP通信（例如发送HTTP请求或创建HTTP服务器）时，可以使用node自带的HTTP模块（即”http”模块）。在本攻略中，我们将深入探讨http模块，包括其基本API、执行流程等。 http模块 在node中，我们可以使用以下代码来引入http模块： const http = require(‘http’); http模…

    node js 2023年6月8日
    00

  • 我的Node.js学习之路（四）–单元测试

    下面是我的Node.js学习之路（四）–单元测试的完整攻略： 1. 什么是单元测试？ 单元测试是针对软件系统中的最小可测试单元进行验证和检验的过程。在Node.js中，单元通常是指一个函数、一个方法或者一个模块。 单元测试的目的是在代码实现之前或者之后，尽早地发现代码中的问题，使得我们能够及早地进行修改和优化。通过单元测试，我们可以确保代码在各种情况下都能…

    node js 2023年6月8日
    00

  • 关于node编写文件上传的接口的坑及解决

    当使用Node.js编写文件上传的接口时，可能会遇到以下坑点： 对于大文件上传，内存可能会不足，导致服务器崩溃。因此，需要使用流的方式读取上传文件，而不是将整个文件直接读取到内存中。 在多个文件同时上传或者文件较大时，可能会导致上传速度变慢或者上传过程中出现错误。这个坑点可以通过对上传进度进行监控和限制上传速度来解决。 针对这些坑点，下面是详细的解决方案： …

    node js 2023年6月8日
    00

  • nodejs管理工具nvm安装过程详解

    Nodejs管理工具nvm安装过程详解 什么是nvm nvm (node version manager) 是一个用于管理多个Nodejs版本的工具。它可以让你在同一台机器上轻松地切换不同版本的Nodejs，从而在不同的项目中使用不同的Nodejs版本。 安装nvm 步骤一：获取nvm安装脚本 你可以在github上的nvm仓库获取nvm的安装脚本。使用cu…

    node js 2023年6月8日
    00

  • import与export在node.js中的使用详解

    import与export在node.js中的使用详解 在ES6中，引入了import/export模块化语法，方便了我们在JS代码中引入其他文件的变量和函数，并且使得JavaScript代码可以更好地组织和维护。 在Node.js中，我们同样可以使用import/export实现模块化，在这里我们将对相关概念和用法进行详细的介绍。 什么是模块化 模块化是指…

    node js 2023年6月8日
    00

  • React安装node-sass失败解决方案分享

    下面是关于“React安装node-sass失败解决方案分享”的完整攻略，包含了两条示例说明。 问题描述 在使用React项目中，当我们使用 npm install 安装依赖时，可能会遇到安装 node-sass 失败的问题，这个问题在Windows、Linux、MacOS等操作系统下都有可能出现。 解决方案 推荐两种解决方案。 方案一：使用cnpm cnp…

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