JavaScript实战 - 验证身份证号码格式的合法性

最新推荐文章于 2024-08-08 10:21:34 发布

逍遥Sean

最新推荐文章于 2024-08-08 10:21:34 发布

阅读量573

点赞数 4

分类专栏： JavaScript实战案例（完整源代码）文章标签： javascript mysql 开发语言

本文链接：https://blog.csdn.net/Ureliable/article/details/140741893

版权

JavaScript实战案例（完整源代码）专栏收录该内容

15 篇文章 0 订阅

订阅专栏

作者：逍遥Sean
简介：一个主修Java的Web网站\游戏服务器后端开发者
主页：https://blog.csdn.net/Ureliable
觉得博主文章不错的话，可以三连支持一下~ 如有疑问和建议，请私信或评论留言！

前言：

身份证号码是每个国家用于唯一标识公民身份的重要证件。在中国，居民身份证号码是一个特定格式的字符串，且其格式和校验位计算规则十分严格。本文将介绍如何使用HTML和JavaScript来验证中国居民身份证号码的合法性。

身份证号码格式及校验规则

格式要求:
- 身份证号码是一个18位的字符串，其中前17位是数字，最后一位可能是数字或字母X（代表10）。
校验位计算:
- 身份证号码的最后一位是校验位，根据前17位数字通过一定的计算得出，用于检验身份证号码的有效性。

HTML和JavaScript实现

以下是一个简单的HTML页面，结合JavaScript函数，用于验证中国居民身份证号码的合法性：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>验证身份证号码格式的合法性</title>
<style>
    body {
        font-family: Arial, sans-serif;
        padding: 20px;
    }
    label {
        font-weight: bold;
    }
</style>
</head>
<body>
    <h2>验证身份证号码格式的合法性</h2>
    <form id="idCardForm">
        <label for="idCardNumber">请输入身份证号码：</label>
        <input type="text" id="idCardNumber" name="idCardNumber" required>
        <button type="submit">验证</button>
    </form>
    <div id="result"></div>

    <script>
        function validateChineseIDCard(idCard) {
            // 正则表达式验证格式
            const pattern = /^[1-9]\d{5}(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/;

            if (!pattern.test(idCard)) {
                return false;
            }

            // 验证校验位
            const modWeight = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]; // 权重
            const modCheckDigit = [1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2]; // 校验位映射

            const idArray = idCard.split('');
            let sum = 0;
            for (let i = 0; i < 17; i++) {
                sum += parseInt(idArray[i]) * modWeight[i];
            }

            const mod = sum % 11;
            const checkDigit = modCheckDigit[mod];

            return idArray[17] === checkDigit.toString();
        }

        const form = document.getElementById('idCardForm');
        const resultDiv = document.getElementById('result');

        form.addEventListener('submit', function(event) {
            event.preventDefault();
            const idCardNumber = document.getElementById('idCardNumber').value.trim();

            if (validateChineseIDCard(idCardNumber)) {
                resultDiv.textContent = `身份证号码 ${idCardNumber} 是有效的。`;
                resultDiv.style.color = 'green';
            } else {
                resultDiv.textContent = `身份证号码 ${idCardNumber} 是无效的，请输入正确的身份证号码。`;
                resultDiv.style.color = 'red';
            }
        });
    </script>
</body>
</html>

技术解析

HTML部分:
- 提供了一个简单的表单，用户可以输入要验证的身份证号码，并通过按钮触发验证操作。
JavaScript部分:
- validateChineseIDCard 函数用于验证身份证号码的格式和校验位的合法性。它使用了正则表达式来验证号码的基本格式，然后计算校验位以确认号码的有效性。
- 通过 addEventListener 方法，表单提交时触发验证操作，根据验证结果更新页面显示内容。