JS implementation of the completion of the social security number, mobile phone number, ticket number and other information automatic space effect

Source: Internet
Author: User
Tags ticket



We do the site, the user experience that is very important, such as 12306 Rob tickets need to fill in the ID card, if not the space, dense to give me a very depressing feeling, and also not easy to check whether the information is filled out correctly, so I wrote a use JS implementation of the completion of the social security number, mobile phone number, The effect of automatic space for information such as ticket number.



For convenience, self-defined a simple get () method and Trim () method, the code is as follows:


// Get the corresponding object --function function.
function get (id) {
     return document.getElementById (id);
}

// Remove all spaces-properties of the String class.
String.prototype.trim = function () {
     return this.replace (/ \ s + / g, "");
};





Example 1: Social Security Number automatic space, support 18-bit ID number, in the form of "xxx xxx xxxx xxxx, xxxx".


// Auto ID space.
function FillIdentity () {
    var idNumber = get ("IDNumber"); // The Id of the text box where the ID number is entered on the page.
    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);
                    }
                }
            }
        }
    }
} 





Example 2: Mobile phone number automatic space, support 11-bit mobile phone number, in the form of "xxx xxxx xxxx".


// Auto phone space.
function FillMobile () {
     var mobile = get ("Mobile"); // The Id of the text box where the mobile number is entered on the page.
     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);
             }
         }
     }
} 





Example 3: The ticket number automatic space, no fixed format, simply means "four bits a space", the format is "xxxx xxxx xxxx".


// The admission ticket number is automatically blank.
function FillTicket () {
     var ticket = get ("Ticket"); // The Id of the text box on the page where the ticket number is entered.
     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)) {// Without this judgment, there will be a bug that it is invalid to press the backspace key when encountering a space.
                     ticket.value + = "";
                 }
             }
             ticket.value + = tValue.substring (count * 4, tLength);
         }
     }
} 





Other code:



Verify that the ID card number is correct, including verifying that the date of birth is legal, and that the check code is correct.


// The ID card verification method that can prompt the verification code.
function FillNumber () {
    var num = get ("IDNumber"). value.trim (); // The Id of the text box where the ID number is entered on the page.
    if (num == "") {
        alert ("Please enter your ID number!");
        return false;
    }
    num = num.toUpperCase ();
    // The ID number is 15 digits or 18 digits, all digits are 15 digits, the first 17 digits are the digits, and the last digit is the check digit, which may be a number or the character X (upper case on the ID card).
    if (! (/ (^ \ d {15} $) | (^ \ d {17} ([0-9] | X) $) /. test (num))) {
        alert (‘Warm reminder: \ n \ nThe ID number entered is not the correct length, or the number does not meet the requirements! \ n15-digit numbers should be all digits, and 18-digit numbers can be digits or X at the end!’);
        return false;
    }
    // The check digit is generated in accordance with ISO 7064: 1983.MOD 11-2. X can be regarded as the number 10.
    // Analyze the date of birth and check digit separately
    var len, re;
    len = num.length;
    if (len == 15) {
        if (isNaN (num)) {
            alert ("15-digit ID number can only be a number!");
            return false;
        }
        re = new RegExp (/ ^ (\ d {6}) (\ d {2}) (\ d {2}) (\ d {2}) (\ d {3}) $ /);
        var arrSplit = num.match (re);

        // Check if the birthday date is correct.
        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 (‘Warm reminder: \ n \ nThe birth date in the ID number you entered is incorrect, please confirm it and re-enter it!’);
            return false;
        }
        else {
            // Convert 15 digit ID to 18 digits
            // The check digit is generated in accordance with ISO 7064: 1983.MOD 11-2. X can be regarded as the number 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 ("The current 15-digit ID number is correct!");
            return num;
        }
    }
    if (len == 18) {
        if (isNaN (num.substring (0, 17))) {
            alert ("The first 17 digits of the ID number can only be numbers!");
            return false;
        }
        re = new RegExp (/ ^ (\ d {6}) (\ d {4}) (\ d {2}) (\ d {2}) (\ d {3}) ([0-9] | X ) $ /);
        var arrSplit = num.match (re);

        // Check if the birthday date is correct
        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 (‘Warm reminder: \ n \ nThe birth date in your ID card number (’ + arrSplit [2] + arrSplit [3] + arrSplit [4] + ‘) is incorrect, please confirm and re-enter!’);
            return false;
        }
        else {
            if (isNaN (num.substring (17)) && num.substring (17)! = "X") {
                alert ("The verification code for an 18-digit ID number can only be 0 to 9 or the letter 'X'");
                return false;
            }
            // Check if the 18-digit ID card verification code is correct.
            // The check digit is generated in accordance with ISO 7064: 1983.MOD 11-2. X can be regarded as the number 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 (‘Warm reminder: \ n \ nThe verification code of the 18-digit ID card is incorrect. It should be:‘ + valnum + ", please confirm it and re-enter it!");
                return false;
            }
            alert ("The current 18-digit ID number is correct!");
            return num;
        }
    }
} 








Thank you for your patience to read the whole post!!!
If there are any errors or improper articles, please treatise!
you have any comments or suggestions, you can send me an e-mail, you can also leave a message below, I saw the first time to reply to you, thank you!  


Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.