自定义表单认证控件

于 2011-09-28 15:04:23 发布
阅读量1k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： Web 文章标签： function parameters null object jquery input
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/webwalker/article/details/5342619

       页面下单时，常需要对页面用户填选值输入规则验证，通常情况下，需要写大量的JS脚本完成客户端校验，如果复杂一些，除验证基本的数据规则外，还需要动态的控制页面验证的样式，徒劳而重复！所以通过简单的封装可以完成批量表单元素的规则验证。

本文通过采用JQUERY类库框架完成表单元素验证。

§、实现效果

      

§、分析设计

注册FORM中HTML元素属性，在onblur时触发验证规则，onfocus时显示默认提示信息，在FORM submit时自动遍历HTML符合规则的元素进行合法性验证。

注册元素属性、事件有两种方式：

1、 完全与元素脱离，仅在页面初始化-DOM元素加载完成后，动态为DOM元素附加校验规则，设定默认提示及样式、出错提示及样式、验证规则。

2、 直接在页面元素HTML标记上增加相应的待验证属性标识。

$、代码实现

(function($) {
    var isSubmit = true;
    $.ToolTip = {
        CallBackEvent: null,
        RetObj: { Item: null, ErrMsg: "", ErrorCode: 0 }
    };
    $.ToolTip.AddParas = function(parameters) {
        $.extend($.ToolTip, parameters || {});
    };
    $.fn.tooltip = function(options) {
        var opts = $.extend({}, $.fn.tooltip.defaults, options);
        this.each(function() {
            if ($(this).attr("tipctrid") != undefined) {
                var dObj = $("#" + $(this).attr("tipctrid"));
                if (dObj.attr('tip') != undefined) {
                    $(this).focus(function() { $.SetTip(dObj.get(0).id, dObj.get(0), "tip", "HelpDiv"); });
                }
                // Validate
                if (dObj.attr('reg') != undefined) {
                    $(this).focus(function() {

                    }).blur(function() {
                        if ($.EnableBlur) {
                            $.oneIsValid(dObj.get(0));
                        }
                    });
                }
            }
            else {
                if ($(this).attr('tip') != undefined) {
                    $(this).focus(function() { $.SetTip($(this).get(0).id, $(this).get(0), "tip", "HelpDiv"); });
                }
                // Validate
                if ($(this).attr('reg') != undefined) {
                    $(this).focus(function() {
                    }).blur(function() {
                        if ($.EnableBlur) {
                            $.oneIsValid($(this).get(0));
                        }
                    });
                }
            }
        });
        if (opts.onsubmit) {
            $('form').submit(function() { return $.IsPageValid(); });
        }
    };
    $.EnableBlur = true;
    $.IsPageValid = function() {
        isSubmit = true;
        $('form').find('[reg]').each(function() {
            if ($(this).attr("tipctrid") != undefined)
                $.oneIsValid($(this).attr("tipctrid"));
            else
                $.oneIsValid($(this).get(0));
        });
        if ($.ToolTip.CallBackEvent && typeof $.ToolTip.CallBackEvent == "function") {
            try {
                $.ToolTip.CallBackEvent();
                if ($.ToolTip.RetObj.ErrorCode != 0) {
                    $.SetTip($.ToolTip.RetObj.Item.id, $.ToolTip.RetObj.Item, null, "TipDiv", $.ToolTip.RetObj.ErrMsg);
                    $($.ToolTip.RetObj.Item).addClass('tooltipinputerr');
                    isSubmit = false;
                }
                else {
                    $($.ToolTip.RetObj.Item).removeClass('tooltipinputerr');
                    $("#div" + $.ToolTip.RetObj.Item.id).hide();
                }
            }
            catch (e) { }
        }
        return isSubmit;
    };
    //验证单个是否验证通过
    $.oneIsValid = function(elem) {
        var id = elem.id;
        var srcTag = elem.tagName;
        var stype = elem.type;
        var maxValue = $(elem).attr('maxValue');
        var minValue = $(elem).attr('minValue');
        if ($.IsHiddenValidate($(elem))) return true; //continue,保留验证属性,显示时继续验证        
        switch (srcTag) {
            case "INPUT":
                if (stype == "text" || stype == "password") {
                    var thisReg = new RegExp($(elem).attr('reg'));
                    if (!thisReg.test(elem.value)) {
                        $(elem).addClass('tooltipinputerr');
                        $.SetTip(id, elem, "errortip", "TipDiv");
                        isSubmit = false;
                    }
                    else if ($(elem).attr('compareto') != undefined) { //内容比较
                        if (elem.value != $("#" + $(elem).attr('compareto')).val()) {
                            $.SetTip(id, elem, "comparetip", "TipDiv");
                            $(elem).addClass('tooltipinputerr');
                            isSubmit = false;
                        }
                        else {
                            $(elem).removeClass('tooltipinputerr');
                            $("#div" + id).hide();
                        }
                    }
                    else if ($(elem).attr('not') != undefined) {
                        if (elem.value == $(elem).attr('not')) {
                            $.SetTip(id, elem, "nottip", "TipDiv");
                            $(elem).addClass('tooltipinputerr');
                            isSubmit = false;
                        }
                        else {
                            $(elem).removeClass('tooltipinputerr');
                            $("#div" + id).hide();
                        }
                    }
                    else {
                        $(elem).removeClass('tooltipinputerr');
                        $("#div" + id).hide();
                    }
                    if (thisReg.test(elem.value) && maxValue != undefined && minValue != undefined) {
                        if (parseInt(elem.value) > parseInt(maxValue)) {
                            isSubmit = false;
                            $.SetTip(id, elem, "maxerrtip", "TipDiv");
                        }
                        else if (parseInt(elem.value) < parseInt(minValue)) {
                            isSubmit = false;
                            $.SetTip(id, elem, "minerrtip", "TipDiv");
                        }
                        else {
                            $("#div" + id).hide();
                        }
                    }
                }
                break;
            case "SELECT":
            case "TEXTAREA":
                var thisReg = new RegExp($(elem).attr('reg'));
                if (!thisReg.test(elem.value)) {
                    $(elem).addClass('tooltipinputerr');
                    $.SetTip(id, elem, "errortip", "TipDiv");
                    isSubmit = false;
                } else {
                    $(elem).removeClass('tooltipinputerr');
                    $("#div" + id).hide();
                }
                break;
        }
        if ($.ToolTip.CallBackEvent && typeof $.ToolTip.CallBackEvent == "function") {
            try {
                $.ToolTip.CallBackEvent();
                if ($.ToolTip.RetObj.ErrorCode != 0) {
                    $.SetTip($.ToolTip.RetObj.Item.id, $.ToolTip.RetObj.Item, null, "TipDiv", $.ToolTip.RetObj.ErrMsg);
                    $($.ToolTip.RetObj.Item).addClass('tooltipinputerr');
                    isSubmit = false;
                }
                else {
                    $($.ToolTip.RetObj.Item).removeClass('tooltipinputerr');
                    $("#div" + $.ToolTip.RetObj.Item.id).hide();
                }
            }
            catch (e) { }
        }
        return isSubmit;
    };
    $.SetTip = function(id, elem, tipname, tipClass, errmsg) {
        if (tipname != null) {
            var tip = $(elem).attr(tipname);
            if (errmsg == undefined && tip != undefined) {
                var thisReg = new RegExp(/_/g);
                errmsg = tip.replace(thisReg, " ");
            }
        }

        if (errmsg != undefined && errmsg != "") {
            if ($("#div" + id).length == 0) {
                var div = "<div id='div" + id + "' class='" + tipClass + "'></div>";
                $(div).appendTo($("body")).html(errmsg)
                                    .css({ left: $.GetLeft(elem) + $(elem).width() + 'px', top: $.GetTop(elem) - 16 + 'px' });
                if (!document.all)
                    $("#div" + id).css({ left: $.GetLeft(elem) + $(elem).width() + 11 + 'px' });
            }
            else {
                $("#div" + id).html(errmsg);
            }
            $("#div" + id).removeClass();
            $("#div" + id).addClass(tipClass).show();
        }
    };
    //隐藏的控件不做验证 xujian 2008-12-20
    $.IsHiddenValidate = function(obj) {
        var IsNeedValidate = false;

        if ($(obj).css("display") == "none" || $(obj).css("visibility") == "hidden") {
            return true;
        }
        var list = $(obj).parents(":hidden");
        for (var i = 0; i < list.length; i++) {
            if ($(obj) == $(list[i]) || list.css("display") == "none"
                || list.css("visibility") == "hidden") {
                IsNeedValidate = true; break;
            }
        }
        return IsNeedValidate;
    };
    $.ResetValidator = function() {
        $(".TipDiv").remove();
        $(".HelpDiv").remove();
    },
    $.extend({
        GetTop: function(object) {
            var go = object;
            var oParent, oTop = go.offsetTop;
            while (go.offsetParent != null) {
                oParent = go.offsetParent;
                oTop += oParent.offsetTop;
                go = oParent;
            }
            return oTop + 20;
        },
        GetLeft: function(object) {
            var go = object;
            var oParent, oLeft = go.offsetLeft;
            while (go.offsetParent != null) {
                oParent = go.offsetParent;
                oLeft += oParent.offsetLeft;
                go = oParent;
            }
            return oLeft;
        },
        onsubmit: true
    });
    $.fn.tooltip.defaults = { onsubmit: true };
    $(document).ready(function() { jQuery('select[reg],input[reg],textarea[reg]').tooltip() });
})(jQuery)

考虑到下述情况，脚本中增加了特殊方法：

1、 重置页面错误提示信息

$.ResetValidator

2、 隐藏的控件不做验证

IsHiddenValidate

3、 自定义回调验证事件

$.ToolTip.CallBackEvent

Eg: 

$.ToolTip.AddParas({ CallBackEvent:function() { $("#divselectArea").hide(); } }); //特殊处理
在FORM提交之前，也可预先通过调用$.oneIsValid判断单个元素合法性，通过$.IsPageValid判断所有标记元素的合法性。

§、页面应用

 采用第一种方式注册待验证元素属性， 注册页面元素：

<input name="txtAccount" type="text" maxlength="40" id="txtAccount" reg="\S+" tip="请输入您要充值的帐号。" errortip="请输入您要充值的帐号。" onfocus="SubmitOrder.ShowPlayerTypeTip();" /> 

<select errortip="" style="width: 182px;" onchange="PageRender.CreateGroup();" reg="\d+" id="selectArea" class="tooltipinputerr"></select>

§、总结

       上述实现仅考虑到简单情况下的应用，结合不同的产品应用场景，可以做不同的定制。

当然目前有许多种类的FORM客户端验证控件，很强大也很复杂，考虑到不同的情况未必适合我们使用，eg:复杂的交换、置换逻辑、 Http Loading Time很苛刻的情况下etc.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值