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

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

 

效果：