L--基於js自制註冊頁面驗證插件

介紹

徹底基於javascript的驗證插件

js代碼

var registerValidate = (function () {
    var validateObj = {
        warnInfo:"請按提示輸入內容",
        errorInfo:"您輸入的的內容有誤，請按提示輸入"
    };

    var registerValidate = function () {
        /*----phone number-------*/
        validateObj = {
            input: document.getElementsByTagName("input")[0],
            labelP: document.getElementById("validate-phone"),
            regex: /^1\d{10}$/g,
            warnInfo: "請輸入11位手機號碼",
            errorInfo: "您輸入的手機號碼有誤，請覈實後從新填寫"
        };
        validate(validateObj);
        /*-----chaptcha--------*/
        validateObj = {
            input: document.getElementsByTagName("input")[1],
            labelP: document.getElementById("validate-chaptcha"),
            regex: /^\d{6}$/g,
            warnInfo: "請輸入6位驗證碼",
            errorInfo: "您輸入的驗證碼有誤，請覈實後從新填寫"
        };
        validate(validateObj);
        /*-----密碼--------*/
        validateObj = {
            input: document.getElementsByTagName("input")[2],
            labelP: document.getElementById("validate-password"),
            regex: /^\d{6}$/g,
            warnInfo: "請輸入6-16位數字及字符組合的密碼",
            errorInfo: "您輸入的密碼有誤，請覈實後從新填寫"
        };
        validate(validateObj);
        /*------姓名-------*/
        validateObj = {
            input: document.getElementsByTagName("input")[4],
            labelP: document.getElementById("validate-name"),
            regex: /^\d{6}$/g,
            warnInfo: "請輸入2-5個字符的姓名，1個字符 = 2位",
            errorInfo: "您輸入的用戶名有誤，請覈實後從新填寫"
        };
        validate(validateObj);
        /*------身份證號碼----*/
        validateObj = {
            input: document.getElementsByTagName("input")[5],
            labelP: document.getElementById("validate-IDcard"),
            regex: /^\d{6}$/g,
            warnInfo: "請輸入2-5個字符的姓名，1個字符 = 2位",
            errorInfo: "您輸入的用戶名有誤，請覈實後從新填寫"
        };
        validate(validateObj);
        validateObj = {
            input: document.getElementsByTagName("input")[6],
            labelP: document.getElementById("validate-yhCard"),
            regex: /^\d{6}$/g,
            warnInfo: "請輸入自動還款銀行卡號",
            errorInfo: "您輸入的用戶名有誤，請覈實後從新填寫"
        };
        validate(validateObj);
    };

    /*-------驗證通用函數，4個參數 1.代驗證input；2輸出信息標籤；3.正則；4.warnInfo; 5.erroInfo-----------*/
    //input, labelP, regex, warnInfo, erroInfo

    function validate( validateObj ) {
        validateObj.input.onfocus = function() {
            if (validateObj.input.value == "") {
                validateObj.labelP.style.display = "inline-block";
                validateObj.labelP.innerHTML = '<i class="validate_warn"></i><span>' + validateObj.warnInfo + '</span>';
            };
        }
        validateObj.input.onkeyup = function() {
            var valLength = validateObj.input.value.replace(/[^\x00-xff]/g, "xx").length;
            validateObj.labelP.innerHTML = '<i class="validate_warn"></i><span>當前輸入位數位數'+valLength+'</span>';
        } 
        validateObj.input.onblur = function () {
            //var regex = /^1\d{10}$/g;
            //var regex = new Regex()
            if (!validateObj.regex.test(validateObj.input.value)) {
                validateObj.labelP.innerHTML = '<i class="validate_error"></i><span>' + validateObj.errorInfo + '</span>';
            }else {
                validateObj.labelP.innerHTML = '<i class="validate_ok">';
            }
        }
    }
    return registerValidate;
})();