扩展Jquery自定义的一个错误警告控件ErrorProvider

 HTML:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>错误警告组件</title>   
    <link href="Styles/JExtension.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.6.min.js" type="text/javascript"></script>
    <script src="JExtensions/JErrorProvider.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#error").blur(function () {
                if ($("#error").val() == "") {
                    $("#error").errorProvider({ msg: '不可空白', type: 'error', distance: 0 });
                }
                else {
                    $("#error").errorProvider({ msg: '', type: 'error', distance: 0 });
                }
            });
            $("#warn").blur(function () {
            if ($("#warn").val() == "") {
                $("#warn").errorProvider({ msg: '不可空白', type: 'warn', distance: 0 });
            }
            else {
                $("#warn").errorProvider({ msg: '', type: 'warn', distance: 0 });
            }
        });
        });
    </script>
</head>
<body>
<input id="error" type="text" /><br />
<input id="warn" type="text" />
</body>
</html>

 SCRIPT:

$.fn.extend({
        errorProvider: function(cfg) {
            if (!cfg.hasOwnProperty("msg")) {
                throw new Error("msg未设置");
            }
            if (!cfg.hasOwnProperty("type")) {
                cfg.type = "warn";
            }            
            if (!cfg.hasOwnProperty("distance")) {
                cfg.distance = 0;
            }
            var siblings = this.next("span[esist='true']");
            if(cfg.msg!='')
            {
                if(siblings.length==0)
                    {
                var sign = $('<span>').attr("title", cfg.msg).attr("esist","true").html("    ");
                if (cfg.type == "error") {
                    sign.attr("class", "error").css("left", cfg.distance);
                }
                else {
                    sign.attr("class", "warn").css("left", cfg.distance);
                }
                sign.insertAfter(this);
                    }
                else {
                    $(siblings).show();
                }
            }
            else {
                if(siblings.length>0) {
                    $(siblings).hide();
                }
            }
        }
   });

 CSS:

.error
{
	background-image: url("./images/error.png");
	background-repeat: no-repeat;
	border- 0; 
	position: relative;
	 24px;
	height: 24px;
	background-position: center;
}
.warn {
	background-image: url("./images/warning.png");
	background-repeat: no-repeat;
	border- 0;
	position: relative;
     24px;
	height: 24px;
	background-position: center;
}

原文地址:https://www.cnblogs.com/kingge/p/2234847.html