js实现填写身份证号、手机号、准考证号等信息自动空格的效果

　　咱们做网站的，用户体验那是相当重要的，比如12306抢票需要填写身份证，如果不空格，密密麻麻的给我一种很压抑的感觉，而且也不容易核对信息是否填写正确，所以我就写了一个利用Js实现填写身份证号、手机号、准考证号等信息自动空格的效果。

为了方便，自已定义的一个简单的get()方法和trim()方法，代码如下：

//获取对应的对象--function函数.
function get(id) {
    return document.getElementById(id);
}

//去掉所有空格--String类的属性.
String.prototype.trim = function () {
    return this.replace(/\s+/g, "");
};

 

实例1：身份证号自动空格，支持18位的身份证号码，格式为"xxx xxx xxxx xxxx xxxx".

//身份证自动空格.
function FillIdentity() {
    var idNumber = get("IDNumber");//页面上输入身份证号码的文本框的Id.
    var idValue = idNumber.value.trim();
    if (idValue != "") {
        var idLength = idValue.length;
        if (idLength <= 3) {
            idNumber.value = idValue;
        } else {
            if (idLength <= 6) {
                idNumber.value = idValue.substring(0, 3) + " " + idValue.substring(3, idLength);
            } else {
                if (idLength <= 10) {
                    idNumber.value = idValue.substring(0, 3) + " " + idValue.substring(3, 6) + " " + idValue.substring(6, idLength);
                } else {
                    if (idLength <= 14) {
                        idNumber.value = idValue.substring(0, 3) + " " + idValue.substring(3, 6) + " " + idValue.substring(6, 10) + " " + idValue.substring(10, idLength);
                    } else {
                        idNumber.value = idValue.substring(0, 3) + " " + idValue.substring(3, 6) + " " + idValue.substring(6, 10) + " " + idValue.substring(10, 14) + " " + idValue.substring(14, idLength);
                    }
                }
            }
        }
    }
}

 

实例2：手机号码自动空格，支持11位的手机号码，格式为"xxx xxxx xxxx".

//手机号自动空格.
function FillMobile() {
    var mobile = get("Mobile");//页面上输入手机号码的文本框的Id.
    var mValue = mobile.value.trim();
    if (mValue != "") {
        var mLength = mValue.length;
        if (mLength <= 3) {
            mobile.value = mValue;
        } else {
            if (mLength <= 7) {
                mobile.value = mValue.substring(0, 3) + " " + mValue.substring(3, mLength);
            } else {
                mobile.value = mValue.substring(0, 3) + " " + mValue.substring(3, 7) + " " + mValue.substring(7, mLength);
            }
        }
    }
}

 

实例3：准考证号自动空格，没有固定的格式，简单来说就是"四位一空格"，格式为"xxxx xxxx xxxx".

//准考证号自动空格.
function FillTicket() {
    var ticket = get("Ticket");//页面上输入准考证号的文本框的Id.
    var tValue = ticket.value.trim();
    if (tValue != "") {
        var tLength = tValue.length;
        var count = parseInt(tLength / 4);
        if (count >= 1) {
            ticket.value = "";
            for (var i = 1; i <= count; i++) {
                ticket.value += tValue.substring((i - 1) * 4, (i) * 4);
                if (tLength > (i * 4)) {//不加此判断会出现遇到空格按退格键无效的Bug.
                    ticket.value += " ";
                }
            }
            ticket.value += tValue.substring(count * 4, tLength);
        }
    }
}

 

其他代码：

验证身份证号码是否正确，包括验证出生日期是否合法，校验码是否正确.

//能提示校验码的身份证号码验证方法.
function FillNumber() {
    var num = get("IDNumber").value.trim();//页面上输入身份证号码的文本框的Id.
    if (num == "") {
        alert("请输入身份证号！");
        return false;
    }
    num = num.toUpperCase();
    //身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X(身份证上是大写)。   
    if (!(/(^\d{15}$)|(^\d{17}([0-9]|X)$)/.test(num))) {
        alert('温馨提示：\n\n输入的身份证号长度不对，或者号码不符合规定！\n15位号码应全为数字，18位号码末位可以为数字或X！');
        return false;
    }
    //校验位按照ISO 7064:1983.MOD 11-2的规定生成，X可以认为是数字10。 
    //下面分别分析出生日期和校验位 
    var len, re;
    len = num.length;
    if (len == 15) {
        if (isNaN(num)) {
            alert("15位身份证号码只能为数字！");
            return false;
        }
        re = new RegExp(/^(\d{6})(\d{2})(\d{2})(\d{2})(\d{3})$/);
        var arrSplit = num.match(re);

        //检查生日日期是否正确.
        var dtmBirth = new Date('19' + arrSplit[2] + '/' + arrSplit[3] + '/' + arrSplit[4]);
        var bGoodDay;
        bGoodDay = (dtmBirth.getYear() == Number(arrSplit[2])) && ((dtmBirth.getMonth() + 1) == Number(arrSplit[3])) && (dtmBirth.getDate() == Number(arrSplit[4]));
        if (!bGoodDay) {
            alert('温馨提示：\n\n您输入的身份证号码里出生日期不对，请确认后重新输入！');
            return false;
        }
        else {
            //将15位身份证转成18位 
            //校验位按照ISO 7064:1983.MOD 11-2的规定生成，X可以认为是数字10。 
            var arrInt = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2);
            var arrCh = new Array('1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2');
            var nTemp = 0, i;
            num = num.substr(0, 6) + '19' + num.substr(6, num.length - 6);
            for (i = 0; i < 17; i++) {
                nTemp += num.substr(i, 1) * arrInt[i];
            }
            num += arrCh[nTemp % 11];
            alert("当前15位身份证号码正确！");
            return num;
        }
    }
    if (len == 18) {
        if (isNaN(num.substring(0, 17))) {
            alert("身份证号码前17位只能为数字！");
            return false;
        }
        re = new RegExp(/^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/);
        var arrSplit = num.match(re);

        //检查生日日期是否正确 
        var dtmBirth = new Date(arrSplit[2] + "/" + arrSplit[3] + "/" + arrSplit[4]);
        var bGoodDay;
        bGoodDay = (dtmBirth.getFullYear() == Number(arrSplit[2])) && ((dtmBirth.getMonth() + 1) == Number(arrSplit[3])) && (dtmBirth.getDate() == Number(arrSplit[4]));
        if (!bGoodDay) {
            //alert(dtmBirth.getYear());
            //alert(arrSplit[2]);
            alert('温馨提示：\n\n您输入的身份证号码里出生日期(' + arrSplit[2] + arrSplit[3] + arrSplit[4] + ')不对，请确认后重新输入！');
            return false;
        }
        else {
            if (isNaN(num.substring(17))&&num.substring(17) != "X") {
                alert("18位身份证号码的校验码只能为0至9或者字母‘X’");
                return false;
            }
            //检验18位身份证的校验码是否正确。 
            //校验位按照ISO 7064:1983.MOD 11-2的规定生成，X可以认为是数字10。 
            var valnum;
            var arrInt = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2);
            var arrCh = new Array('1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2');
            var nTemp = 0, i;
            for (i = 0; i < 17; i++) {
                nTemp += num.substr(i, 1) * arrInt[i];
            }
            valnum = arrCh[nTemp % 11];
            if (valnum != num.substr(17, 1)) {
                alert('温馨提示：\n\n18位身份证的校验码不正确，应该为：' + valnum + "，请您确认后重新输入！");
                return false;
            }
            alert("当前18位身份证号码正确！");
            return num;
        }
    }
}

 

 

感谢您怀着耐心看完整篇博文！！！
如果文章有什么错误或不当之处，请您斧正！
您有任何意见或者建议，您可以给我发邮件，也可以在下面留言，我看到了会第一时间回复您的，谢谢！