码迷,mamicode.com
首页 > Web开发 > 详细

L--基于js自制注册页面验证插件

时间:2015-03-09 22:25:43      阅读:284      评论:0      收藏:0      [点我收藏+]

标签:

介绍

完全基于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;
})();

 

L--基于js自制注册页面验证插件

标签:

原文地址:http://www.cnblogs.com/guDouMaoNing/p/4324526.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!