纯手写漂亮的表单验证
因为是自定义样式，所以 兼容所有浏览器版本，个人认为非常漂亮：
图：
css
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()"/>
js:
1 function submitOneClickApply() { 2 3 var username = $("#userName").val(); 4 5 if (username == "" ) { 6 $("#userName").rzAlertTips({ flagInfo: '请输入联系人' });// $("#userName").rzAlertTips(); 只要你的 placeholder="请输入联系人" 它就能提示“请输入联系人”}
7 }
调用的js:
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: true 12 }, 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 //设置提示信息最小宽度为163 22 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>
