JS验证控件1.2 新增提示框

最新推荐文章于 2023-12-19 22:45:43 发布

lrxin

最新推荐文章于 2023-12-19 22:45:43 发布

阅读量548

点赞数

分类专栏： JavaScript 文章标签： function null javascript class delete ie

本文链接：https://blog.csdn.net/lrxin/article/details/7990453

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

// JavaScript Document
if (typeof (HTMLElement) != "undefined") {
    HTMLElement.prototype.insertAdjacentElement = function(where, parsedNode) {
        switch (where) {
            case "beforeBegin":
                this.parentNode.insertBefore(parsedNode, this);
                break;
            case "afterBegin":
                this.insertBefore(parsedNode, this.firstChild);
                break;
            case "beforeEnd":
                this.appendChild(parsedNode);
                break;
            case "afterEnd":
                if (this.nextSibling)
                    this.parentNode.insertBefore(parsedNode, this.nextSibling);
                else
                    this.parentNode.appendChild(parsedNode);
                break;
        }
    }
    HTMLElement.prototype.insertAdjacentHTML = function(where, htmlStr) {
        var r = this.ownerDocument.createRange();
        r.setStartBefore(this);
        var parsedHTML = r.createContextualFragment(htmlStr);
        this.insertAdjacentElement(where, parsedHTML);
    }
    HTMLElement.prototype.insertAdjacentText = function(where, txtStr) {
        var parsedText = document.createTextNode(txtStr);
        this.insertAdjacentElement(where, parsedText);
    }
}


function addEvent(element, type, handler) {
    //为每一个事件处理函数分派一个唯一的ID
    if (!handler.$$guid) handler.$$guid = addEvent.guid++;
    //为元素的事件类型创建一个哈希表
    if (!element.events) element.events = {};
    //为每一个"元素/事件"对创建一个事件处理程序的哈希表
    var handlers = element.events[type];
    if (!handlers) {
        handlers = element.events[type] = {};
        //存储存在的事件处理函数(如果有)
        if (element["on" + type]) {
            handlers[0] = element["on" + type];
        }
    }
    //将事件处理函数存入哈希表
    handlers[handler.$$guid] = handler;
    //指派一个全局的事件处理函数来做所有的工作
    element["on" + type] = handleEvent;
};
//用来创建唯一的ID的计数器
addEvent.guid = 1;
function removeEvent(element, type, handler) {
    //从哈希表中删除事件处理函数 www.2cto.com
    if (element.events && element.events[type]) {
        delete element.events[type][handler.$$guid];
    }
};
function handleEvent(event) {
    var returnValue = true;
    //抓获事件对象(IE使用全局事件对象)
    event = event || fixEvent(window.event);
    //取得事件处理函数的哈希表的引用
    var handlers = this.events[event.type];
    //执行每一个处理函数
    for (var i in handlers) {
        this.$$handleEvent = handlers[i];
        if (this.$$handleEvent(event) === false) {
            returnValue = false;
        }
    }
    return returnValue;
};
//为IE的事件对象添加一些“缺失的”函数
function fixEvent(event) {
    //添加标准的W3C方法
    event.preventDefault = fixEvent.preventDefault;
    event.stopPropagation = fixEvent.stopPropagation;
    return event;
};
fixEvent.preventDefault = function() {
    this.returnValue = false;
};
fixEvent.stopPropagation = function() {
    this.cancelBubble = true;
};

//验证控件
var Validator = function(formid) {
    var $$ = function(id) {
        return document.getElementById(id);
    }
    this.IsValidator = false;
    var base = this;
    var form = $$(formid);
    var validArr = new Array();
    var validObjTag = "v_";
    //绑定验证控件的Class属性   
    var spans = document.getElementsByTagName("span");
    for (var i = 0; i < spans.length; i++) {
        if (spans[i].id.indexOf(validObjTag) != -1)
            spans[i].className = "validator";
    }
    //绑定提交事件
    addEvent(form, "submit", function() {
        base.IsValidator = base.valid(true);
        return base.IsValidator;
    });

    //验证控件对应的ID   
    function validObjID(id) {
        return validObjTag + id;
    }
    //验证控件左边的对象内容
    function validName(id) {
        var txt = $($$(id).parentNode).prev();
        try {
            var result = txt[0].innerHTML.replace('：', '');
            result = urlHelp.MyReplace(result, ' ', '');
            result = urlHelp.MyReplace(result, '\n', '');
            return result;
        } catch (e) {
            return null; //txt.parentNode.previousSibling.innerHTML.replace('：', '');
        }
    }
    //绑定验证事件
    this.bind = function(id, eventArr, afterFun) {
        if ($$(id)) {
            if (!$$(validObjID(id))) {
                var valid = validObjID(id);
                var span = document.createElement("span");
                span.setAttribute("id", valid);
                span.setAttribute("class", "validator");
                $$(id).insertAdjacentElement("afterEnd", span);
                //alert("验证控件（id=" + validObjID(id) + "）不存在！");   
            }
            var count;
            validArr.push(new Array(id, eventArr, afterFun));
            addEvent($$(id), "blur", function() {
                var result = true;
                for (var i = 0; i < eventArr.length; i++) {
                    result = base.doValid(id, eventArr[i][0], eventArr[i][1], eventArr[i][2]);
                    if (!result) {
                        break;
                    }
                }
                if (afterFun != null && afterFun != undefined && result) {
                    afterFun($$(id), $$(validObjID(id)));
                }
            });
        }
    }
    //所有对象的验证事件   
    this.valid = function(showAlert) {
        var pass = true;
        for (var i = 0; i < validArr.length; i++) {
            var result = false;
            for (var j = 0; j < validArr[i][1].length; j++) {
                result = base.doValid(validArr[i][0], validArr[i][1][j][0], validArr[i][1][j][1], validArr[i][1][j][2]);
                if (!result) {
                    pass = false;
                    //显示验证提示
                    if (showAlert == true) {
                        var msg = validArr[i][1][j][1];
                        if (msg == "*") {
                            msg = "不得为空";
                        }
                        var show = validName(validArr[i][0]);
                        if (show != null) {
                            $$(validArr[i][0]).focus();
                            alert("【" + show + "】" + msg);
                            return pass;
                        }
                    }
                    break;
                }
            }
            var afterFun = validArr[i][2];
            if (afterFun != null && afterFun != undefined && result) {
                afterFun($$(validArr[i][0]), $$(validObjID(validArr[i][0])));
            }
        }
        return pass;
    }
    //一个对象的验证事件
    this.doValid = function(id, type, msg, reg) {
        if (msg == "*")
            msg = "*必填";
        switch (type) {
            case "empty": //为空
                return writeMsg(id, msg, ($$(id).value == ""));
                break;
            case "regular": //正则验证   
                return writeMsg(id, msg, ($$(id).value != "" && !reg.test($$(id).value)));
                break;
            case "contrast": //比较
                return writeMsg(id, msg, ($$(id).value != $$(reg).value));
                break;
            //在此添加别的判断事件                                                                    
        }
    }
    //写出错误信息
    function writeMsg(id, msg, result) {
        $$(validObjID(id)).style.color = 'red';
        if (result) {
            $$(validObjID(id)).innerHTML = msg;
            return false;
        } else {
            //$$(validObjID(id)).style.color = 'green';
            $$(validObjID(id)).innerHTML = '';
            return true;
        }
    }
}

例子：

function afterFun(txtbox, msg) {  
           return true;//txtbox验证通过后处理事件   
       }  
       window.onload = function() {  
           var vld = new Validator("form1");  
           vld.bind("txt_pwd", [["empty", "*"], ["regular", "超过最大长度10", /^.{0,10}$/], ["contrast", "不相同", "txt_pwd2"]], afterFun);  
           vld.valid();  
       }

本次更新，新增提示框，需要引用JQ。