Jquery 错误提示插件

这是一个简单的输入框错误提示插件，可拓展！

.jq-error{

    font-size:12px;

    min-width:150px;

    width:auto;

    max-width:350px;

    line-height:20px;

    position:relative;

    border:1px solid #fe4e4c;

    background-color:#fe4e4c;

    color:white;

    margin-top:5px;

    padding: 4px 10px;

}



.error-bottom > div{

    width:8px;

    height:8px;

    position:absolute;

    background-color:#fe4e4c;

    transform:rotate(45deg);

    margin-top:-7px;

}



.error-top{

    position:absolute;

    margin-top:-67px;

}



.error-top > div{

    width:8px;

    height:8px;

    position:absolute;

    background-color:#fe4e4c;

    transform:rotate(45deg);

   bottom:-5px;

}



.error-right{

    float: right;

    margin-left: 10px;

    margin-top:0;

}



.error-right > div{

    width:8px;

    height:8px;

    position:absolute;

    background-color:#fe4e4c;

    transform:rotate(45deg);

    left:-5px;

    margin-top:5px;

}

 

(function ($) {

    'use strict';

    $.fn.error = function (options) {

        var dom = $(this);

        

        //错误提示框位置:errorStyle  

        /**

         * error向上显示：'error-top'

         * error向右显示：'error-right'

         * error向下显示：'error-bottom'

         * error向左显示：'error-left'            

         **/

        

        var default_option = {

            errorStyle: 'error-bottom',

            msg: (typeof(options) == 'string' ? options : options.msg)

        };

        

        default_option = $.extend(default_option, options);//合并用户输入参数

        

        //错误提示模板

        var error_tpl = '<div class="jq-error '+ default_option.errorStyle +'"><div></div>'+

                         default_option.msg +'</div>';

        

        if (dom.next('div').hasClass('jq-error')){

             dom.next('div').remove();

        }

        

        //插入错误提示

        dom.after(error_tpl);

    };

})(jQuery);

使用方法：

$('#txt_error_top').on('blur', function () {

    $(this).error({errorStyle: 'error-top', msg: '这是一个向上弹出的提示'});

}); 

    

$('#txt_error_right').on('blur', function () {

    $(this).error({errorStyle: 'error-right', msg: '这是一个向右弹出的提示'});

});

 

效果：