身份证基本数据获取及验证

最新推荐文章于 2022-10-20 15:58:25 发布

看到代码头都是大的

最新推荐文章于 2022-10-20 15:58:25 发布

阅读量633

点赞数

本文链接：https://blog.csdn.net/ym5209999/article/details/117982581

版权

身份证基本数据获取及验证

根据输入的身份证号码：
1.点击“提交”按钮或按下键盘“Enter”键，判断输入的身份证号是否正确；
2.在身份证输入正确的时候，获取身份证中基本信息填入表格中。

所在省份的值从json文件中获取，若有详细市州、地区代码对照表，可对json数据进行完善后，获取更详细信息。

效果如下

代码架构如下

代码如下
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>身份证验证</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    .box {
        width: 500px;
        height: 300px;
        border: 1px solid #bcbdb5;
        margin: 50px auto;
    }

    .search {
        height: 60px;
        text-align: center;
        line-height: 60px;
        border-bottom: 1px solid #e8e8e8;
    }

    .search > input {
        height: 30px;
        font-size: 14px;
    }

    .search > input:nth-child(1) {
        width: 200px;
        margin-right: 10px;
        padding-left: 5px;
    }

    .search > input:nth-child(2) {
        width: 50px;
    }

    .show {
        height: 230px;
        margin: 5px auto;
        line-height: 50px;
        text-align: center;
        border: 1px solid #bcbdb5;
    }

    .show tr > td {
        width: 175px;
    }

    .show tr > td:nth-child(2n) {
        width: 300px;
    }
</style>
<body>
<div class="box">
    <div class="search">
        <input type="text" title="" maxlength="18" placeholder="请输入18位身份证号" id="input">
        <input type="submit" title="" id="submit">
    </div>

    <table class="show" id="show" cellspacing="0" border="1">
        <tr>
            <td>您查询的身份证号码：</td>
            <td id="num"></td>
        </tr>
        <tr>
            <td>性别：</td>
            <td id="sex"></td>
        </tr>
        <tr>
            <td>出生日期：</td>
            <td id="birthday"></td>
        </tr>
        <tr>
            <td>所在省份：</td>
            <td id="province"></td>
        </tr>
    </table>
</div>

<script type="text/javascript">
    let input = document.getElementById('input');
    let submit = document.getElementById('submit');
    let num = document.getElementById('num');
    let sex = document.getElementById('sex');
    let birthday = document.getElementById('birthday');
    let province = document.getElementById('province');
    let src = "";
    let provinceList = [];

    submit.onclick = function () {
        verification();
    };

    document.onkeydown = function () {
        if (event.keyCode === 13) {
            verification();
        }
    };

    function verification() {
        let reg = /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)/;
        let value = input.value;
        if (reg.test(value) === false || value.length === 0) {
            alert("身份证输入不合法");
            return false;
        } else {
            let pro = value.slice(0, 2);
            let year = value.slice(6, 10);
            let month = value.slice(10, 12);
            let day = value.slice(12, 14);
            num.innerHTML = value;
            getProvince(pro);
            if (value[16] % 2 === 0) {
                sex.innerHTML = "女";
            } else {
                sex.innerHTML = "男";
            }
            src = year + "年" + month + "月" + day + "日";
            birthday.innerHTML = src
        }
    }

    function getProvince(pro) {
        let xhr = new XMLHttpRequest();
        xhr.open('get', './city.json');
        xhr.send();
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                provinceList = JSON.parse(xhr.responseText);
                for (let j = 0; j < provinceList.length; j++) {
                    if (provinceList[j].code === pro) {
                        province.innerHTML = provinceList[j].name;
                    }
                }
            }
        };
    }
</script>

</body>
</html>

city.json

[
  {"code":"11","name":"北京市"},
  {"code":"12","name":"天津市"},
  {"code":"13","name":"河北省"},
  {"code":"14","name":"山西省"},
  {"code":"15","name":"内蒙古自治区"},
  {"code":"21","name":"辽宁省"},
  {"code":"22","name":"吉林省"},
  {"code":"23","name":"黑龙江省"},
  {"code":"31","name":"上海市"},
  {"code":"32","name":"江苏省"},
  {"code":"33","name":"浙江省"},
  {"code":"34","name":"安徽省"},
  {"code":"35","name":"福建省"},
  {"code":"36","name":"江西省"},
  {"code":"37","name":"山东省"},
  {"code":"41","name":"河南省"},
  {"code":"42","name":"湖北省"},
  {"code":"43","name":"湖南省"},
  {"code":"44","name":"广东省"},
  {"code":"45","name":"广西壮族自治区"},
  {"code":"46","name":"海南省"},
  {"code":"50","name":"重庆市"},
  {"code":"51","name":"四川省"},
  {"code":"52","name":"贵州省"},
  {"code":"53","name":"云南省"},
  {"code":"54","name":"西藏自治区"},
  {"code":"61","name":"陕西省"},
  {"code":"62","name":"甘肃省"},
  {"code":"63","name":"青海省"},
  {"code":"64","name":"宁夏回族自治区"},
  {"code":"65","name":"新疆维吾尔自治区"},
  {"code":"71","name":"台湾省"},
  {"code":"81","name":"香港特别行政区"},
  {"code":"82","name":"澳门特别行政区"}
]

可优化点
1.点击“提交”按钮或按下键盘“Enter”键后，对输入框中的数据进行清除；
2.展示表格中，可适当添加市州、区县等相关信息；
3.可把15位身份证号的情况考虑到设计中。