通过身份证号码验证性别和获取生日的方法如下：
- 身份证号码的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>
