分享纯手写漂亮的表单验证

前端之家收集整理的这篇文章主要介绍了分享纯手写漂亮的表单验证前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

哈哈 手工馒头好吃,今天小编跟大家分享手工js表单验证代码,感兴趣的朋友快来吧。

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

css

/*tooltip*//* CSS属性顺序按照 字母首字母 排列*/ .ui-slider-tooltip{ background:#fa; border:px solid #fa; color:#fff; display: block; text-align: left; padding: px px px px; position: absolute; z-index:; } .ui-corner-all { border-radius: px; -moz-border-radius-bottomleft:px; -moz-border-radius-bottomright:px; -moz-border-radius-topleft:px; -moz-border-radius-topright:px; -webkit-border-top-left-radius:px px; -webkit-border-top-right-radius:px px;-webkit-border-bottom-right-radius:px px; -webkit-border-bottom-left-radius:px px;} .ui-tooltip-pointer-down { border-bottom-width: ; border-left: px dashed transparent; border-right: px dashed transparent; border-top: px solid #fa; bottom: -px; display: block; height:; left: %; margin-left: -px; position: absolute; width:;} .ui-tooltip-pointer-down-inner { border-left: px dashed transparent; border-right: px dashed transparent; border-top: px solid #fa; left: -px; top: -px; position: absolute; } .tip{ font-size:pt; line-height:px;} .error{ border: px solid rgb(,);}

前台

js:

调用的js:

提示信息最小宽度为 options.flagWidth = "auto"; // (parseInt(options.flagWidth) < ) ? : parseInt(options.flagWidth);+ "px" var oTip = $("
"); var oPointer = $("
"); var oTipInfo = $("
" + options.flagInfo + "
").attr("class",options.flagCss).css("width",options.flagWidth); //合并提示信息 oToolTip = $(oTip).append(oTipInfo).append(oPointer); if ($("#tipWrap_" + $(this).attr("id")).length > ) $("#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() - ); 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(); },); }); return this; } })(jQuery);

以上内容就是小编给大家分享的纯手写漂亮的表单验证,希望大家喜欢。

原文链接:https://www.f2er.com/js/51619.html

猜你在找的JavaScript相关文章