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

哈哈手工馒头好吃，今天小编跟大家分享手工js表单验证代码，感兴趣的朋友快来吧。
因为是自定义样式，所以兼容所有浏览器版本，个人认为非常漂亮：网址wuxi.rongzi.com
css

 <style> /*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（, , ）;} </style>

前台：

 <input type="text" id="userName"/> <input type="submit" onclick="submitOneClickApply（）"/>

js:

 function submitOneClickApply（） { var username = $（"#userName"）.val（）; if （username == "" || username == "请输入您的姓名"） { $（"#userName"）.rzAlertTips（{ flagInfo: "请输入联系人", isAnimate: true }）; }

调用的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（"title"）, isAnimate: false }, settings）; if （！options.flagInfo） { return; } $（this）.removeAttr（"title"）; var obj = $（this）; var oToolTip = null; var fun_show = function （） { //设置提示信息最小宽度为 options.flagWidth = "auto"; // （parseInt（options.flagWidth） < ） ? : 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 > ） $（"#tipWrap_" + $（this）.attr（"id"））.remove（）; //添加淡入效果 if （options.isAnimate） { $（oToolTip）.fadeIn（"slow"）; } $（obj）.after（oToolTip）; //计算提示信息的top、left和width//position.topvar 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）; </script>

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