纯手写漂亮的表单验证

因为是自定义样式，所以 兼容所有浏览器版本，个人认为非常漂亮： 

图：

css

  <style>
        /*tooltip*//* CSS属性顺序按照 字母首字母 排列*/
.ui-slider-tooltip{    background:#f5a455;     border:1px solid #f5a455;    color:#fff;    display: block;    text-align: left;    padding: 5px 3px 5px 5px;    position: absolute;    z-index:99999; }
.ui-corner-all {    border-radius: 3px;    -moz-border-radius-bottomleft:3px;    -moz-border-radius-bottomright:3px;    -moz-border-radius-topleft:3px;    -moz-border-radius-topright:3px;    -webkit-border-top-left-radius:3px 3px;    -webkit-border-top-right-radius:3px 3px;-webkit-border-bottom-right-radius:3px 3px;    -webkit-border-bottom-left-radius:3px 3px;}
.ui-tooltip-pointer-down {    border-bottom-width: 0;    border-left: 7px dashed transparent;     border-right: 7px dashed transparent;    border-top: 8px solid #f5a455;    bottom:    -8px;    display: block;    height:0;    left: 18%;    margin-left: -7px;    position: absolute;     width:0;}
.ui-tooltip-pointer-down-inner {    border-left: 6px dashed transparent;     border-right: 6px dashed transparent;    border-top: 7px solid #f5a455;    left: -6px;    top: -9px;    position: absolute; }
.tip{    font-size:9pt;    line-height:18px;}
 .error{ border: 1px solid rgb(223, 74, 67);}
  

    </style>

前台：

<input type="text" id="userName"/>
 <input type="button" onclick="submitOneClickApply()"/>

js:

 function submitOneClickApply() {

        var username = $("#userName").val();
 
        if (username == ""  ) {
            $("#userName").rzAlertTips({ flagInfo: '请输入联系人' });// $("#userName").rzAlertTips(); 只要你的 placeholder="请输入联系人" 它就能提示“请输入联系人”}
}

调用的js:

<script type="text/javascript">
    (function ($) {
        jQuery.fn.extend({
            rzAlertTips: function (settings) {
                $(this).each(function () {
                    //初始化配置信息
                    var options = jQuery.extend({
                        flagCss: "tip",
                        flagWidth: $(this).outerWidth(),
                        flagInfo: $(this).attr("placeholder"),
                        isAnimate: true
                    },
        settings);
                    if (!options.flagInfo) {
                        return;
                    }
                    $(this).removeAttr("title");
                    var obj = $(this);
                    var oToolTip = null;
                    var fun_show = function () {
                        //设置提示信息最小宽度为163

                        options.flagWidth = "auto"; // (parseInt(options.flagWidth) < 100) ? 163 : parseInt(options.flagWidth);+ "px"
                        var oTip = $("<div class='ui-slider-tooltip  ui-corner-all'  id='tipWrap_" + $(this).attr("id") + "'></div>");
                        var oPointer = $("<div class='ui-tooltip-pointer-down'><div class='ui-tooltip-pointer-down-inner'></div></div>");
                        var oTipInfo = $("<div>" + options.flagInfo + "</div>").attr("class", options.flagCss).css("width", options.flagWidth);
                        //合并提示信息
                        oToolTip = $(oTip).append(oTipInfo).append(oPointer);
                        if ($("#tipWrap_" + $(this).attr("id")).length > 0) $("#tipWrap_" + $(this).attr("id")).remove();
                        //添加淡入效果
                        if (options.isAnimate) {
                            $(oToolTip).fadeIn("slow");
                        }
                        $(obj).after(oToolTip);
                        //计算提示信息的top、left和width   //position.top 
                        var position = $(obj).position();
                        var oTipTop = eval(position.top - $(oTip).outerHeight() - 8);
                        var oTipLeft = position.left;


                        $(oToolTip).css("top", oTipTop + "px").css("left", oTipLeft + "px");
                    };
                    fun_show();
                    $('.error').removeClass('error');
                    $(this).addClass("error");
                    setTimeout(function () { $(oToolTip).remove(); }, 3000);

                });
                return this;
            } 
    })(jQuery);
</script>