你的位置:首页 > Java教程

[Java教程]纯手写漂亮的表单验证


因为是自定义样式,所以 兼容所有浏览器版本,个人认为非常漂亮:网址wuxi.rongzi.com

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="submit" onclick="submitOneClickApply()"/>

js:

1 function submitOneClickApply() {2 3     var username = $("#userName").val();4 5     if (username == "" || username == "请输入您的姓名") {6       $("#userName").rzAlertTips({ flagInfo: '请输入联系人', isAnimate: true });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("title"),11             isAnimate: false12           },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>