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;
        }
    }
}