纯手写漂亮的表单验证

 1   <style> 2         /*tooltip*//* CSS属性顺序按照 字母首字母 排列*/ 3 .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; } 4 .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;} 5 .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;} 6 .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; } 7 .tip{    font-size:9pt;    line-height:18px;} 8  .error{ border: 1px solid rgb(223, 74, 67);} 9   10 11     </style>

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

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

 1 <script type="text/javascript"> 2     (function ($) { 3         jQuery.fn.extend({ 4             rzAlertTips: function (settings) { 5                 $(this).each(function () { 6                     //初始化配置信息 7                     var options = jQuery.extend({ 8                         flagCss: "tip", 9                         flagWidth: $(this).outerWidth(),10                         flagInfo: $(this).attr("placeholder"),11                         isAnimate: true12                     },13         settings);14                     if (!options.flagInfo) {15                         return;16                     }17                     $(this).removeAttr("title");18                     var obj = $(this);19                     var oToolTip = null;20                     var fun_show = function () {21                         //设置提示信息最小宽度为16322 23                         options.flagWidth = "auto"; // (parseInt(options.flagWidth) < 100) ? 163 : parseInt(options.flagWidth);+ "px"24                         var oTip = $("<div class='ui-slider-tooltip  ui-corner-all'  id='tipWrap_" + $(this).attr("id") + "'></div>");25                         var oPointer = $("<div class='ui-tooltip-pointer-down'><div class='ui-tooltip-pointer-down-inner'></div></div>");26                         var oTipInfo = $("<div>" + options.flagInfo + "</div>").attr("class", options.flagCss).css("width", options.flagWidth);27                         //合并提示信息28                         oToolTip = $(oTip).append(oTipInfo).append(oPointer);29                         if ($("#tipWrap_" + $(this).attr("id")).length > 0) $("#tipWrap_" + $(this).attr("id")).remove();30                         //添加淡入效果31                         if (options.isAnimate) {32                             $(oToolTip).fadeIn("slow");33                         }34                         $(obj).after(oToolTip);35                         //计算提示信息的top、left和width   //position.top 36                         var position = $(obj).position();37                         var oTipTop = eval(position.top - $(oTip).outerHeight() - 8);38                         var oTipLeft = position.left;39 40 41                         $(oToolTip).css("top", oTipTop + "px").css("left", oTipLeft + "px");42                     };43                     fun_show();44                     $('.error').removeClass('error');45                     $(this).addClass("error");46                     setTimeout(function () { $(oToolTip).remove(); }, 3000);47 48                 });49                 return this;50             } 51     })(jQuery);52 </script>