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日

相关文章

  • nodejs中的express-jwt的使用解读

    下面就来详细讲解“nodejs中的express-jwt的使用解读”的完整攻略。 什么是express-jwt express-jwt是一个基于jwt(jsonwebtoken)认证的中间件，用于验证客户端发来的请求是否合法。 安装express-jwt 在终端中运行以下命令来安装express-jwt： npm install express-jwt 使用…

    node js 2023年6月8日
    00

  • Node.js JSON模块用法实例分析

    当我们需要将前端界面提供的数据转换成JSON格式并传到后台服务器进行处理时，就需要用到Node.js的JSON模块。下面，我将带领大家学习关于Node.js的JSON模块用法实例。 JSON模块简介 JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它是基于JavaScript的一个子集。JSON数据格式易于读写，易…

    node js 2023年6月8日
    00

  • node.js中的require使用详解

    Node.js 中的 require 使用详解 什么是 require 在 Node.js 中，用于加载模块的方法叫做 require。我们可以通过 require 加载 Node.js 核心模块和第三方模块，也可以加载自定义模块。 require 的使用方式 加载核心模块 在使用 Node.js 的过程中，我们经常需要使用到一些核心模块，例如 fs、htt…

    node js 2023年6月8日
    00

  • node.js 实现手机号验证码登录功能

    关于如何实现“node.js 实现手机号验证码登录功能”的攻略，我可以提供如下的完整步骤。 步骤一：安装依赖库 要实现手机号验证码登录功能，需要使用到一些第三方依赖库，比如 express、jsonwebtoken、bcryptjs 等。可以通过以下命令安装： npm install express jsonwebtoken bcryptjs 步骤二：设计接…

    node js 2023年6月8日
    00

  • NodeJS后端开发操作文件之读写文件

    下面是NodeJS后端开发操作文件之读写文件的完整攻略： 1. 读取文件内容 读取文件的时候，我们可以利用NodeJS中的fs模块。fs模块是NodeJS自带的文件系统模块，通过该模块我们可以实现对文件的读写操作。 打开文件的步骤如下： const fs = require(‘fs’) //定义要读取的文件路径 const filePath = ‘./exa…

    node js 2023年6月8日
    00

  • Node使用Selenium进行前端自动化操作的代码实现

    Node使用Selenium进行前端自动化操作的代码实现 简介 Selenium是一款用于Web应用程序测试的工具，其可接受任何编程语言的支持，包括Java、C#、Python以及Node.js等，支持自动化操作网页，进行前端功能测试，比如表单自动填充、页面自动跳转、自动点击元素等。 Node.js官方提供了一个Selenium的模块——selenium-w…

    node js 2023年6月8日
    00

  • 一文详解JavaScript中的URL和URLSearchParams

    一文详解JavaScript中的URL和URLSearchParams 介绍 在JavaScript中，URL和URLSearchParams是用来操作URL的两个重要对象。URL对象表示一个URL，而URLSearchParams对象是用来操作URL中的查询参数。 在本文中，我们将详细讲解这两个对象的使用方法，并通过示例来说明其应用场景。 URL对象 构造…

    node js 2023年6月8日
    00

  • npm一键安装Python以及node-sass依赖环境的方法

    要在npm中一键安装Python和node-sass依赖环境，需要使用node-gyp这个工具。node-gyp是一个跨平台的工具，它可以编译Node.js模块中需要编译的原生C++代码。下面是具体的操作步骤： 1. 安装 Python 首先，需要安装Python。可以从官网下载最新版的Python。https://www.python.org/downlo…

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