2

功能描述

录入一些客户的信息,证件验证,例如身份证、护照验证等。
身份证号码验证正确以后,手动录入后实现能自动显示生日、性别 信息,不用手动填写。

身份证号码组合方式介绍

中华人民共和国公民身份号码 --维基百科,自由的百科全书
图片描述

代码实现

部分html代码:

<tr>
    <td>姓名<code>*</code></td>
    <td>
        <label class="input remind">
           <input type="text" name="studentName" value="" id="student-name-add" readonly="readonly">
        </label>
    </td>
    <td>证件类型</td>
    <td>
       <label class="input remind">
                <select name="cardType" id="cardType-add-select" class="hide">
                    <option value="">------请选择证件类型------</option>
                    <option value="IDCard">身份证</option>
                    <option value="Passport">护照</option>
                    <option value="StudentCard">学生证</option>
                    <option value="Other">未知</option>
                </select><i></i>  
        </label>
    </td>
</tr>
<tr>
    <td>证件号码<code>*</code></td>
    <td>
    <label class="input remind idCard-remind">
        <input type="text" name="idcard" value="" id="idCard-add" readonly="readonly">
    </label>
    </td>
    <td>生日<code>*</code></td>
    <td>
        <label class="input remind">
            <input type="text" name="birth" id="birthday" value="" class="" readonly="readonly">
            </label>
    </td>
    <td>性别</td>
    <td>
        <label class="radio hide" style="display: inline-block;">
        <input type="radio" name="sex" value="MALE" id="add-sex-MALE" class="hide"><i></i>男</label>
        <label class="radio hide" style="display: inline-block;">
            <input type="radio" name="sex" value="FEMALE" id="add-sex-FEMALE" class="hide"><i></i>女</label> 
    </td>
</tr>

css略

js代码如下:

$('body').on('change', '#idCard-add', function () {
        $(".help-inline").remove();
        var cardType = $('#cardType-add-select').val();
        var code = $(this).val();
        if (code != "") {
            if (cardType == "IDCard") {
                identityCodeValid(code);
            } else if (cardType == "Passport") {
                checkPassport(code);
            }
        }
    });

身份证校验

参考:身份证号码的正则表达式及验证详解(JavaScript,Regex)

// 支持地址编码、出生日期、校验位验证
function identityCodeValid(code) {
    var tip = "";
    var pass = true;
    
    var city = {
        11: "北京",
        12: "天津",
        13: "河北",
        14: "山西",
        15: "内蒙古",
        21: "辽宁",
        22: "吉林",
        23: "黑龙江 ",
        31: "上海",
        32: "江苏",
        33: "浙江",
        34: "安徽",
        35: "福建",
        36: "江西",
        37: "山东",
        41: "河南",
        42: "湖北 ",
        43: "湖南",
        44: "广东",
        45: "广西",
        46: "海南",
        50: "重庆",
        51: "四川",
        52: "贵州",
        53: "云南",
        54: "西藏 ",
        61: "陕西",
        62: "甘肃",
        63: "青海",
        64: "宁夏",
        65: "新疆",
        71: "台湾",
        81: "香港",
        82: "澳门",
        91: "国外 "
    };

    if (!code || !(/^[1-9]\d{5}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X|x)$/i.test(code))) {
        pass = false;
    }

    else if (!city[code.substr(0, 2)]) {
        pass = false;
    } else {
        // 18位身份证需要验证最后一位校验位
        if (code.length == 18) {
            code = code.split('');
            // ∑(ai×Wi)(mod 11)
            // 加权因子
            var factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
            // 校验位
            var parity = [1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2];
            var sum = 0;
            var ai = 0;
            var wi = 0;
            for (var i = 0; i < 17; i++) {
                ai = code[i];
                wi = factor[i];
                sum += ai * wi;
            }
            var last = parity[sum % 11];
            if (last.toString() !== code[17].toUpperCase()) {
                pass = false;
            }
        }
    }
    if (!pass) {
        $('.idCard-remind').append('<span for="idCard-add" class="help-inline">请输入正确的身份证号</span>');
        return false;
    } else {
        discriCard();
        return true;
    }
}

身份证识别性别、生日:

// 身份证号码识别性别、生日
function discriCard() {
    var idCard;
    // 获取输入身份证号码
    idCard = $('#idCard-add').val();
    // 获取出生日期
    var birth = idCard.substring(6, 10) + "-" + idCard.substring(10, 12) + "-"
        + idCard.substring(12, 14);
    $('#birthday').val(birth);
    // 获取性别
    if (parseInt(idCard.substr(16, 1)) % 2 == 1) {
        // 男
        $('#add-sex-MALE').prop("checked", "checked");
    } else {
        // 女
        $('#add-sex-FEMALE').prop("checked", "checked");

    }
}

参考资料

js实现完美身份证号有效性验证
jquery validation验证身份证号、护照、电话号码、email
中华人民共和国公民身份号码 --维基百科,自由的百科全书
身份证号码的正则表达式及验证详解(JavaScript,Regex)


北堂棣
6.6k 声望116 粉丝

2016年应届毕业生。