vue3&JavaScript 根据输入的身份证号码自动解析识别出性别，年龄，出生日期

在很多时候我们需要根据用户输入的身份证号码来识别出用户的性别，年龄，出生日期，这样会给用户更好的体验，下面进入正题

识别性别

识别性别可以使用取余数的方法来判断，奇数为男，偶数为女

// 通过截取身份证号码的最后两位，进行取余数来判断奇数偶数
let sex = IDcard.substring(16, 17);// IDcard为用户输入的身份证号码
return sex % 2 == 1 ? '男' : '女';

识别出生日期

出生日期更加简单了，只需要截取对应位置的字符即可

// 通过截取对应位置拼接对应的字符组成 格式为yyyy-mm-dd
let birthday = IDcard.substring(6, 10) + "-" + IDcard.substring(10, 12) + "-" + IDcard.substring(12, 14);
// 或者
// 使用正则表达式完成
let bir = IDcard.substr(6, 8);// 截取身份证号码，从第七个字符开始截取八个字符
let birthDay = bir.replace(/(.{4})(.{2})/, '$1-$2-');

识别年龄

这个也比较简单，截取出然后进行计算，判断即可

// 截取出出生年份，与当前年份进行计算，得出年龄，然后根据月份、日期判断是否已经过了生日
let age = new Date().getFullYear() - IDcard.substring(6, 10) - 1;
// 判断当前月份或者本月的日期是否已过
if (IDcard.substring(10, 12) < new Date().getMonth()+1 || (IDcard.substring(10, 12) == new Date().getMonth()+1 && IDcard.substring(12, 14) <= new Date().getDate())){
      age++;
}

怎么样？是不是很简单，下面进行一个小封装，直接复制粘贴改一下变量值就可以使用了

封装一下

将函数中的中文改成自己对应的变量即可
可以将函数绑定为身份证号输入框的input事件

function checkout(){
  if (身份证号码.length == 18) {
    let sex = 身份证号的值.substring(16, 17);
     性别的值 = sex % 2 == 1 ? '男' : '女';
    let bir = 身份证号的值.substr(6, 8);
    出生日期的值 = bir.replace(/(.{4})(.{2})/, '$1-$2-');
    年龄的值 = new Date().getFullYear() - 身份证号的值.substring(6, 10) - 1;
    if (身份证号的值.substring(10, 12) < new Date().getMonth()+1 || (身份证号的值.substring(10, 12) == new Date().getMonth()+1 && 身份证号的值.substring(12, 14) <= new Date().getDate())){
      年龄的值++;
    }
  } else {
  	// 将性别，出生日期，年龄置空
    年龄的值 = '';
    出生日期的值 = '';
    年龄的值 = '';
  }
};

效果

我这里因为没有用到年龄，所以没有显示年龄的输入框

身份证号码检验

有不懂的可以在评论区留下你的评论进行讨论，如果对你有所帮助的话，还望留下痕迹支持一下