利用身份证验证性别和获取生日-阿里云开发者社区

通过身份证号码验证性别和获取生日的方法如下：

身份证号码的17位代表性别，奇数代表男性，偶数代表女性。
身份证号码的18位数字的7-10位代表出生年份，格式为YYYY
11-12位：出生月份，格式为MM
13-14位：出生日，格式为DD

根据这个规则，我们可以编写一个程序来验证性别和获取生日。

1.HTML部分

首先在页面上设置三个input输入框，分别放置身份证号码、性别和出生日期

<body>
    <!-- 身份证号码输入框 -->
    <input type="text" placeholder="请输入身份证号码" />
    <!-- 性别输入框 -->
    <input type="text" placeholder="输入身份证号码自动填充" />
    <!-- 出生日期选择框 -->
    <input type="date" placeholder="输入身份证号码自动填充" />
  </body>

然后给身份证输入框绑定oninput事件

<body>
    <!-- 身份证号码输入框 -->
    <input type="text" placeholder="请输入身份证号码" id="sfzh" oninput="sfzh()" />
    <!-- 性别输入框 -->
    <input type="text" placeholder="输入身份证号码自动填充" id="xingbie" />
    <!-- 出生日期选择框 -->
    <input type="date" placeholder="输入身份证号码自动填充" id="birthday" />
  </body>

2.JS部分

然后在JS中设置身份证的oninput事件

首先声明一个正则表达式

let reg = /^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9xX]$/

这个正则表达式可以匹配一个身份证号码，并验证其格式是否正确。

这个正则表达式中：

/^[1-9]\d{5}/ 匹配以 1-9 的数字开头的 6 位数字。
/((19|20)\d{2})/ 匹配 19 或 20 的 4 位年份。
/((0[1-9])|(1[0-2]))/ 匹配 01-12 的月份。
/(([0-2][1-9])|10|20|30|31)/ 匹配 01-31 的日期。
/d{3}/ 匹配 3 位顺序码。
/[0-9xX]/ 匹配校验码，可以是数字或 X。

然后再声明一个变量来获取到身份证输入框里的值

let idcard = document.getElementById('sfzh').value

判断输入框里的值是否为空，如果为空，则让性别和生日输入框的值也为空，同时出现提示文本

// 如果身份证输入框的值为空
        if (idcard == "") {
          // 显示身份证号、性别、出生日期提示框,并且生日和性别的输入框值为空
          $(".sfzh").text("请输入身份证号").css("display", "block");
          $("#xingbie").val("");
          $("#birthday").val("");
          $(".xingbie").show();
          $(".birthday").show();
        }

再判断如果身份证输入框里的值不符合正则表达式，则出现不符合格式提示，性别和生日输入框的值也为空

// 如果不符合正则表达式
        }else if(!reg.test(idcard)){
          // 显示身份证号、性别、出生日期提示框,并且生日和性别的输入框值为空
          $(".sfzh").text("证件号码格式不正确").css("display", "block");
          $("#xingbie").val("");
          $("#birthday").val("");
          $(".xingbie").show();
          $(".birthday").show();
        }

再判断输入框的值符合正则表达式时，隐藏提示文本，

// 如果符合正则表达式
        if (reg.test(idcard)) {
          // 隐藏身份证提示文本
          $(".sfzh").css("display", "none");
          // 隐藏性别提示文本
          $('.xingbie').hide();
          // 隐藏生日提示文本
          $('.birthday').hide();
        }

substring用来截取字符串的函数，起始索引（包括）和结束索引（不包括），有两个参数，从起始索引开始截取，直到但不包括结束索引。

声明一个变量等于身份证号从第16截取到第17位的字符串并转换成整形。

// 获取截取身份证号第16-17位的字符串
          let genderCode = parseInt(idcard.substring(16, 17));

声明一个变量等于身份证号从第6位截取到第10位的字符串

// 获取截取身份证号第6-10位的字符串
          let birthYear = idcard.substring(6, 10);

声明一个变量等于身份证号从第10位截取到第12位的字符串

// 获取截取身份证号第10-12位的字符串
          let birthMonth = idcard.substring(10, 12);

声明一个变量等于身份证号从第12位截取到第14位的字符串

// 获取截取身份证号第12-14位的字符串
          let birthDay = idcard.substring(12, 14);

控制台输出出生年月日

// 控制台输出出生日期
          console.log(birthYear, birthMonth, birthDay);

然后判断性别是男是女，这里采用的是取余的方法，用获取到的第16和第17组成的字符串%2，余数等于0则为女，否则为男。

gender = genderCode % 2 === 0 ? '女' : '男';

控制台输出这个值

然后让性别输入框的值等于这个值

// 将这个值加到性别输入框中
          $('#xingbie').val(gender);

最后让生日输入框的值等于出生年月日拼接的字符串，因为是date格式，中间用-连接

// 拼接出生年月日字符串
          document.getElementById('birthday').value = birthYear + "-" + birthMonth + "-" + birthDay;

3.整体代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <script src="./js/jquery-3.7.1.js"></script>
  </head>
  <body>
    <!-- 身份证号码输入框 -->
    <input type="text" placeholder="请输入身份证号码" id="sfzh" oninput="sfzh()" />
    <p class="sfzh" style="color: red; display: none;">请输入身份证号码</p>
    <!-- 性别输入框 -->
    <input type="text" placeholder="输入身份证号码自动填充" id="xingbie" />
    <p class="xingbie" style="color: red; display: none;">请输入身份证号码</p>
    <!-- 出生日期选择框 -->
    <input type="date" placeholder="输入身份证号码自动填充" id="birthday" />
    <p class="birthday" style="color: red; display: none;">请输入身份证号码</p>
    <script>
      // 身份证验证生日和性别
      function sfzh() {
        // 身份证验证正则表达式
        let reg = /^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9xX]$/
        // 获取到身份证输入框的值
        let idcard = document.getElementById('sfzh').value
        // 如果身份证输入框的值为空
        if (idcard == "") {
          // 显示身份证号、性别、出生日期提示框,并且生日和性别的输入框值为空
          $(".sfzh").text("请输入身份证号").css("display", "block");
          $("#xingbie").val("");
          $("#birthday").val("");
          $(".xingbie").show();
          $(".birthday").show();
          // 如果不符合正则表达式
        } else if (!reg.test(idcard)) {
          // 显示身份证号、性别、出生日期提示框,并且生日和性别的输入框值为空
          $(".sfzh").text("证件号码格式不正确").css("display", "block");
          $("#xingbie").val("");
          $("#birthday").val("");
          $(".xingbie").show();
          $(".birthday").show();
        }
        // 如果符合正则表达式
        if (reg.test(idcard)) {
          // 隐藏身份证提示文本
          $(".sfzh").css("display", "none");
          // 隐藏性别提示文本
          $('.xingbie').hide();
          // 隐藏生日提示文本
          $('.birthday').hide();
          // 获取截取身份证号第16-17位的字符串
          let genderCode = parseInt(idcard.substring(16, 17));
          // 获取截取身份证号第6-10位的字符串作为出生年份
          let birthYear = idcard.substring(6, 10);
          // 获取截取身份证号第10-12位的字符串作为出生月份
          let birthMonth = idcard.substring(10, 12);
          // 获取截取身份证号第12-14位的字符串作为出生日
          let birthDay = idcard.substring(12, 14);
          // 控制台输出出生日期
          console.log(birthYear, birthMonth, birthDay);
          // 用获取到的第16和第17组成的字符串%2，余数等于0则为女，否则为男
          gender = genderCode % 2 === 0 ? '女' : '男';
          // 控制台输出男女
          console.log(gender);
          // 将这个值加到性别输入框中
          $('#xingbie').val(gender);
          // 拼接出生年月日字符串
          document.getElementById('birthday').value = birthYear + "-" + birthMonth + "-" + birthDay;
        }
      }
    </script>
  </body>
</html>

利用身份证验证性别和获取生日

1.HTML部分

2.JS部分

3.整体代码

热门文章

最新文章

相关电子书