问题:如何使用 js 通过身份证号码获取一个人性别?

1.超过16位的数字无法直接处理

在写这篇文章之前先说一下可能有人不知道的小知识,js 无法直接处理超过 16 位以上的数字。而身份证号 18 位,所以我们不能直接操作 number ,应该在获取数字的时候,在代码层面就将其转换为字符串,防止输入的数字的无效。

let n = 111111111111111111
console.log(n)

超过16位以后的数字直接转为 0,这是 js 的缺陷,无法直接解决,在实际工作中,后端传来的数字最好转换为字符串再传输。

2.html代码

我们先写好一个测试用的小demo,type="number" 是输入框,type="button" 是点击。

<form name="demo">
  <input type="text" name="idCard" id="idCard">
  <input type="button" value="点击判断性别" onclick="toGender()">
</form>

3.js代码

这是一个简单的点击事件,先想想如何获取身份证的第16位数字呢?其实很简单。

var a = demo.idCard.value;
// 通过 form 表单自带的特性,使用 name 获取 input 标签的 value 值,也就是身份证号码

// 然后使用 toString() 将数字转换为字符串
// * 不要直接输出数字
var i =a.toString()
console.log(i)

// 通过下标获取第17个元素
console.log(i[16])

通过测试代码可以发现,可以正常获取身份证号的第17位数字了。

根据我国相关法律说明,身份证号的第17位,如果是奇数代表男性,如果是偶数则代表女性,所以我们需要进行一个判断。

关于奇偶数的判断,js 提供有相关属性。

x 是判断的数字,

if( x%2 ==0 ){
  console.log('偶数')   
}else{
  console.log('奇数')
}

4.优化代码

在最终完成后,我发现两个问题。

  1. 应该在页面输出 性别 字样,而不是在控制台。

这个很好解决:

<div id="result"></div>

<script>
  let result = document.getElementById('result');    
  if( x%2 ==0 ){
    console.log('偶数')   
    result.innerHTML('女性');
  }else{
    console.log('奇数');
    result.innerHTML('男性');
  }
</script>
  1. 如果输入的数字不是18位,也不会报错,而且正常输出对应的数字,但是跟性别无关,所以要做一个判断,是否拥有18位数字。
if(i.length == 18) {
  // 输入正确的事件        
  // ...
}else{
  // 提示报错
}

5.整合代码

把 html 和 js 代码都整合在一起:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>demo</title>
</head>
<body>
  <form name="demo">
    <input type="text" name="idCard" id="idCard" />
    <input type="button" value="点击判断性别" onclick="test()" />
  </form>
  <div id="result"></div>

  <script>
    function test() {
      let result = document.getElementById('result');
      let a = demo.idCard.value;
      let i = a.toString();
      // 判断身份证号的长度
      if(i.length == 18) {
        let x = i[16];
    if (x % 2 == 0) {
      // 偶数
      console.log('女性');
      result.innerHTML = '该身份证号的主人为 "女性"';
    } else {
      // 奇数
      console.log('男性');
      result.innerHTML = '该身份证号的主人为 "男性"';
    }
      }else{
    alert('请输入正确的身份证号')
      }
    }
  </script>
</body>
</html>

这样的话,只要在输入框输入你的身份证号码,就可以获取性别,可以复制上面的代码到本地,然后在运行到浏览器自己尝试一下。

点击可直接进行测试


吃完饭出去溜达了一圈,也算赶上五一的气氛,倒也没几个人,吹吹风,清理一下思绪挺好的。祝大家五一玩的开心!