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: '这是一个向右弹出的提示'});
});

 

效果：

 

 

转载于:https://www.cnblogs.com/307914070/p/4303830.html