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