js實現填寫社會安全號碼、手機號、准考證號等資訊自動空格的效果

標籤：style   class   blog   c   code   java   

　　咱們做網站的，使用者體驗那是相當重要的，比如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;        }    }}

 

 

感謝您懷著耐心看完整篇博文！！！
如果文章有什麼錯誤或不當之處，請您斧正！
您有任何意見或者建議，您可以給我發郵件，也可以在下面留言，我看到了會第一時間回複您的，謝謝！