利用身份证验证性别和获取生日_input 身份证输入框-CSDN博客

本文链接：https://blog.csdn.net/geng1025/article/details/134871702

本文介绍了如何使用HTML和JavaScript实现一个功能，通过用户输入的身份证号码自动验证性别（奇数代表男，偶数代表女）并获取出生日期。代码中包含了正则表达式的使用以及对输入值的处理逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

身份证号码的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>